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

前端 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 );