纯js实现波形图

最新推荐文章于 2024-05-25 09:54:26 发布

yazi1297

最新推荐文章于 2024-05-25 09:54:26 发布

阅读量7.3k

点赞数

 
      <!doctype html> 
     
      <html lang= 
      "en" 
      > 
     
      <head> 
     
      <meta charset= 
      "UTF-8" 
      > 
     
      <title>Document</title> 
     
      <style> 
     
      .container{width:500px;height:500px;border:1px solid 
       #DEDEDE;} 
     
      .container span{width:1px;height:50px;float:left;border-bottom:2px solid 
       #F00;margin-bottom:0px;} 
     
      </style> 
     
      </head> 
     
      <body> 
     
      <div  
      class 
      = 
      "container" 
      > 
     
      </div> 
     
      </body> 
     
      <script> 
     
      var 
       i = 0; 
     
      ( 
      function 
       abc() { 
     
      setTimeout( 
      function 
       () { 
     
      if 
       (i++ < 500) { 
     
      var 
       me = document.getElementsByClassName( 
      "container" 
      ); 
     
      var 
       j = document.createElement( 
      'span' 
      ); 
     
      var 
       th = document.getElementsByTagName( 
      "span" 
      ); 
     
      var 
       h = 0; 
     
      if 
       (i > 1) { 
     
      var 
       l = i - 2; 
     
      var 
       h = th[l].clientHeight; 
     
      <!-- console.log(h) --> 
     
      }  
      else 
       { 
     
      h = 50; 
     
      } 
     
      var 
       arr =  
      new 
       Array(-2,-1,0,1,2); 
     
      var 
       k = Math.floor((Math.random() * 5)); 
     
      j.style.height = h + arr[k] +  
      "px" 
      ; 
     
      me[0].appendChild(j); 
     
      <!-- console.log(arr +  
      " " 
       + k); --> 
     
      abc(); 
     
      } 
     
      }, 50); 
     
      })() 
     
      </script> 
     
      </html>