Site Notice
hello, world
Difference between revisions of "Progress"
From Project-EPB Commons
([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
| Line 18: | Line 18: | ||
if (x > 100) { | if (x > 100) { | ||
clearInterval(goprogess); | clearInterval(goprogess); | ||
| − | $('#progress').after('<center>DONE</center>'); | + | $('#progress').after('<center id="done">DONE</center>'); |
$('#progress #bar').delay(3000).css('width','0%'); | $('#progress #bar').delay(3000).css('width','0%'); | ||
} else { | } else { | ||
$('#progress #bar').css('width',x+'%'); | $('#progress #bar').css('width',x+'%'); | ||
$('#progress #num').text(x); | $('#progress #num').text(x); | ||
| + | $('#done').remove(); | ||
} | } | ||
}, 100); | }, 100); | ||
Revision as of 19:17, 21 November 2019
<html> <button onclick="start()">开始</button> <div id="progress" style="width: 80%; margin: auto 10%; height: 1em; border: 1px solid #c5c5c5; padding: 2px"><div id="bar" style="transition: width .1s ease-in-out; height: 100%; width: 0%;background: #a3a2a2;"><span id="num"></span></div></div> <script> function start() {
var goprogess = setInterval(function () {
if (typeof x === 'undefined') x = 0;
x = Number($('#progress #bar').css('width').replace('%','').replace('px',''));
if (x < 50) {
x = x + 1;
} else if (x < 80) {
x = x + 0.5;
} else if (x < 90) {
x = x + 0.25;
} else {
x = x + 0.125;
}
if (x > 100) {
clearInterval(goprogess);
$('#progress').after('<center id="done">DONE</center>');
$('#progress #bar').delay(3000).css('width','0%');
} else {
$('#progress #bar').css('width',x+'%');
$('#progress #num').text(x);
$('#done').remove();
}
}, 100);
} </script> </html>
