前端 javascript 練習題--表格的操作及進度條的實現【千鋒】

andy888168發表於2019-10-12

前端 javascript 練習題 -- 表格的操作及進度條的實現【千鋒】

建立表格,新增刪除操作
介紹:這是用基本的方式,更便捷的方法是,使用es6 提供的模板字串,程式碼和效率能提高很多
簡單的樣式:

a < input type =" text "/>

b < input type =" text "/>

c < input type =" text "/>< input type =" button "  value =" 新增 "/>< table ></ table >

js 實現程式碼:

var  oinput = document . getElementsByTagName ( "input" ); var  otable = document . getElementsByTagName ( "table" )[ 0 ];

oinput [ oinput . length - 1 ]. onclick = function (){

     var  otr = document . createElement ( "tr" );

     // 建立單元格,並且將文字的值加到單元格里

     for ( var  i = 0 ; i < oinput . length - 1 ; i ++ ){

         var  otd = document . createElement ( "td" );

        otd . innerHTML = oinput [ i ]. value ;

        otr . appendChild ( otd );

     }

     // 新增刪除按鈕,並加入到單元格中

     var  otd =  document . createElement ( "td" );

         var  oSpan =  document . createElement ( "span" );

        oSpan . innerHTML =   " 刪除 " ;

        otd . appendChild ( oSpan );

        otr . appendChild ( otd );

        oSpan . onclick   =   function (){

             //oTable.removeChild(oTr);

            otable . removeChild ( this . parentNode . parentNode );

         }

    otable . appendChild ( otr );}

進度條
html 排版樣式:

< div class =" progressBar ">

    < p style =""></ p ></ div >< div class =" progressBar ">

    < p ></ p ></ div >< div class =" progressBar ">

    < p ></ p ></ div >

js 執行程式碼:

var  opp = document . getElementsByTagName ( "p" ); function   progress (obj,num){

     var  count = 0 ;

     var  timer = setInterval ( function (){

        count ++ ;

        obj . style . width = count + "%" ;

         if ( count == num ){

             clearInterval ( timer );

         }

     }, 20 )} progress ( opp [ 0 ], 50 ); progress ( opp [ 1 ], 60 ); progress ( opp [ 2 ], 80 );

 


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69947096/viewspace-2659707/,如需轉載,請註明出處,否則將追究法律責任。

相關文章