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