Site Notice
hello, world
Difference between revisions of "Progress"
From Project-EPB Commons
([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
| Line 1: | Line 1: | ||
<html> | <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 .2s ease-in-out; height: 100%; width: 0%;background: #a3a2a2;"></div></div> | ||
<script> | <script> | ||
| − | + | function start() { | |
| − | + | var goprogess = setInterval(function () { | |
if (typeof x === 'undefined') x = 0; | if (typeof x === 'undefined') x = 0; | ||
| − | if (x < | + | if (x < 50) { |
| − | x = x + | + | x = x + 0.5; |
} else if (x < 8000) { | } else if (x < 8000) { | ||
| − | x = x + 25; | + | x = x + 0.25; |
} else if (x < 9000) { | } else if (x < 9000) { | ||
| − | x = x + | + | x = x + 0.125; |
} else { | } else { | ||
| − | x = x + | + | x = x + 0.05; |
} | } | ||
| − | if (x > | + | if (x > 100) { |
clearInterval(goprogess); | clearInterval(goprogess); | ||
$('#progress').after('<center>DONE</center>'); | $('#progress').after('<center>DONE</center>'); | ||
$('#progress').delay(3000).hide(150); | $('#progress').delay(3000).hide(150); | ||
} | } | ||
| − | $('#progress'). | + | $('#progress #bar').css('width',x+'%'); |
| − | + | }, 20); | |
| − | }, 20); | + | } |
</script> | </script> | ||
</html> | </html> | ||
Revision as of 19:04, 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 .2s ease-in-out; height: 100%; width: 0%;background: #a3a2a2;"></div></div> <script> function start() {
var goprogess = setInterval(function () {
if (typeof x === 'undefined') x = 0;
if (x < 50) {
x = x + 0.5;
} else if (x < 8000) {
x = x + 0.25;
} else if (x < 9000) {
x = x + 0.125;
} else {
x = x + 0.05;
}
if (x > 100) {
clearInterval(goprogess);
$('#progress').after('<center>DONE</center>');
$('#progress').delay(3000).hide(150);
}
$('#progress #bar').css('width',x+'%');
}, 20);
} </script> </html>
