Question

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

我想要动画，例如第一个文件从0％到100％，然后第2行或第二个文件开始从0％到100％，依此类推。

我只希望1个按钮在完成1st之后开始动画，然后它应该在下一个开始，依此类推。表格和进度条的代码如下？有人可以帮助我将两者整合吗？

<!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>

Answer 1

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>

Answer 2

进度状态在每一行的右侧一一显示。

此外，每当您单击按钮（激活进度栏）时。它将变为“停用进度条”，进度将在每一行的右侧逐一显示。

再单击一次，它将更改为“激活进度”栏，进度将进入开始阶段（0％）。

反之亦然。

var btm = document.getElementById("m");
  
btm.onclick = function() {

if (btm.innerHTML == "Activate Progress bar") {
    btm.innerHTML = "Deactivate Progress bar";
  } else {
    btm.innerHTML = "Activate Progress bar";
  }

var x = document.getElementById("myBar");

if(x.style.width == '100%') {
      x.style.width='0%';
      x.style.transition='1s';
      }
else {
	x.style.width='100%';
    x.style.transition='1s';
}

var x = document.getElementById("myBar2");

if(x.style.width == '60%') {
      x.style.width='0%';
      x.style.transition='1s';
      x.style.transitionDelay='.5s';
      }
else {
	x.style.width='60%';
    x.style.transition='1s';
    x.style.transitionDelay='.5s';
    
}

var x = document.getElementById("myBar3");

if(x.style.width == '30%') {
      x.style.width='0%';
      x.style.transition='1s';
      x.style.transitionDelay='1s';
      }
else {
	x.style.width='30%';
    x.style.transition='1s';
    x.style.transitionDelay='1s';

}

}

#myProgress #myProgress2 #myProgress3{
    width: 100%;
}
#myBar {
    width:0%;
    line-height: 30px;
    color:white;
    background-color: lightgreen;
}
#myBar2 {
    width:0%;
    line-height: 30px;
    color:white;
    background-color: #79cedc;
}
#myBar3 {
    width:0%;
    line-height: 30px;
    color:white;
    background-color: #ec3047;
}
table {
  	height:100%;
    width:100%;
}
table td {
  	width:50%;
    padding:5px;
    text-align:center;
    font-family:sans-serif;
}
table th {
    background:black;
    color:white;
    padding:5px;
    font-family:sans-serif;
}
table td:nth-child(odd) {
    border:1px solid black;
    color:black;
}
button {
    padding:5px;
    font-family:sans-serif;
    background:white;
    color:blue;
    border:1px solid black;
}
button:focus {
    outline:none;
}

<table>
    <th>Name</th>
    <th>Status</th>

    <tr>
      <td>progress 1</td>
      <td>
          <div id="myProgress">
            <div id="myBar">(100%)</div>
          </div>
      </td>
    </tr>

    <tr>
      <td>progress 2</td>
      <td>
        <div id="myProgress2">
          <div id="myBar2">(60%)</div>
        </div>
      </td>
    </tr>

    <tr>
      <td>progress 3</td>
      <td>
        <div id="myProgress3">
          <div id="myBar3">(30%)</div>
        </div>
      </td>
    </tr>
</table>

<button id='m'>Activate Progress bar</button>

将进度条添加到HTML表中？

2 个答案: