时间戳

首页 > 解决方案 > 向 HTML 表格添加进度条？

javascript - 向 HTML 表格添加进度条？

问题描述

我想在 html 表的每一行中添加一列进度条来显示每个文件的处理。

我想要像第一个文件从 0% 到 100% 然后第 2 行或第二个文件开始处理从 0% 到 100% 等动画。

只是我希望 1 个按钮在完成第一个后开始动画，然后它应该开始下一个，依此类推。表格和进度条的代码如下？任何人都可以帮助我整合它们。

<!DOCTYPE html>
<html>
<style>
  #myProgress {
    width: 100%;
    background-color: #ddd;
  }
  
  #myBar {
    width: 1%;
    height: 30px;
    background-color: #4CAF50;
  }
</style>

<body>

  <h1>JavaScript Progress Bar</h1>

  <div id="myProgress">
    <div id="myBar"></div>
  </div>

  <br>
  <button onclick="move()">Click Me</button>

  <script>
    function move() {
      var elem = document.getElementById("myBar");
      var width = 1;
      var id = setInterval(frame, 10);

      function frame() {
        if (width >= 100) {
          clearInterval(id);
        } else {
          width++;
          elem.style.width = width + '%';
        }
      }
    }
  </script>

</body>

</html>

标签： javascripthtmlcssprogress-barcss-animations

解决方案

html表格每一行的一列进度条，用于显示每个文件的处理过程。

function start_animation(){ 
 setTimeout( 
function animation1() {
document.getElementsByClassName("one")[0].style.animation = "one 2s linear forwards";
setTimeout(animation1, 100);}, 100 ); 
 next1(); }
function next1(){
  setTimeout( 
function animation2() {
document.getElementsByClassName("one")[1].style.animation = "one 2s linear forwards";
setTimeout(animation2, 100);}, 2600);  
 next2();}
function next2(){
  setTimeout( 
function animation3() {
document.getElementsByClassName("one")[2].style.animation = "one 2s linear forwards";
setTimeout(animation3, 100);}, 4550);
next3();}
function next3(){
  setTimeout( 
function animation4() {
document.getElementsByClassName("two")[0].style.animation = "two 2s linear forwards";
setTimeout(animation4, 100);},6400);}
 body {
	 font-family: Open Sans, San-Serif;
	 font-size: 16px;
	 color: #595959;
	 margin: 20px;
}
 th {
	 font-weight: 700;
	 text-align: center;
	 border: solid 1px #ccc;
	 padding: 5px 0;
}
 td {
	 vertical-align: middle;
	 height: 34px;
   	 text-align: center;
	 padding: 10px;
	 border: solid 1px  #ccc;
}

.one{
line-height: 25px;
 border-radius:5px;
 text-align:center;
display: block;
 color:white;
height:25px;
}
@keyframes one{                
0%{
width:0%;
}
100%{
width:100%;
background-color:#5dc96e;
}
}
.two{
text-align:center;
line-height:25px;
height: 25px;
 border-radius:5px;
display: block;
 color:white;
}

@keyframes two{                
0%{
width:0%;
}
100%{
width:40%;
background-color:red;
}
}
<input value="Start Animation" name="" type="button" onclick="start_animation()" />
<table width="100%">
  <tr>
    <th>Files</th> 
    <th>Type</th>
    <th>1.2MB</th>
    <th>Status </th> 
  </tr>
  <tr>
    <td>File 1</td>
    <td>Excel</td>
    <td>2MB</td>
    <td >
<span class="one">100%</span>

    </td>
  </tr>
  <tr>
    <td>File 2</td>
    <td>word</td>
    <td>100Kb</td>
    <td >
<span class="one">100%</span>

    </td>
  </tr>
  <tr>
    <td>File 3</td>
    <td>Word</td>
    <td>800Kb</td>
    <td >
   <span class="one">100%</span>

    </td>
  </tr>
  <tr>
    <td>File 4 </td>
    <td>Power Point</td>
    <td>1MB</td>
    <td>
<span class="two">40%</span>       
    </td>
  </tr>
</table>

推荐阅读