我想在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>
答案 0 :(得分:3)
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>
答案 1 :(得分:3)
进度状态在每一行的右侧一一显示。
此外,每当您单击按钮(激活进度栏)时。它将变为“停用进度条”,进度将在每一行的右侧逐一显示。
再单击一次,它将更改为“激活进度”栏,进度将进入开始阶段(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>