demo1
<html> <head> <title>进度条</title> <style type="text/css"> ?.container{ ????width:450px; ????border:1px solid #6C9C2C; ????height:25px; ??}#bar{ ????background:#95CA0D; ????float:left; ???height:100%; ????text-align:center; ????line-height:150%; ?} ?</style> ?<script type="text/javascript"> ???function run(){ ?????????var bar = document.getElementById("bar"); ????????var total = document.getElementById("total"); ????bar.style.width=parseInt(bar.style.width) + 1 + "%"; ?????total.innerHTML = bar.style.width; ????if(bar.style.width == "100%"){ ???????window.clearTimeout(timeout); ??????return; ????} ????var timeout=window.setTimeout("run()",100); ??} ????window.onload = function(){ ????????run(); ????} ?</script> ??</head> <body> ??<div class="container"> ???<div id="bar" style="width:0%;"></div> ???</div> ???<span id="total"></span> </body> </html>demo2
<html> ?<head> ?<title>进度条</title> ?<style type="text/css"> ?.processcontainer{ ????width:450px; ????border:1px solid #6C9C2C; ????height:25px; ??} #processbar{ ????background:#95CA0D; ????float:left; ???height:100%; ????text-align:center; ????line-height:150%; ?} ?</style> ?<script type="text/javascript"> ??function setProcess(){ ???var processbar = document.getElementById("processbar"); ???processbar.style.width = parseInt(processbar.style.width) + 1 + "%"; ?processbar.innerHTML = processbar.style.width; ???if(processbar.style.width == "100%"){ ??????window.clearInterval(bartimer); ???} ??} ?var bartimer = window.setInterval(function(){setProcess();},100); ?window.onload = function(){ ????bartimer; ?} ?</script> ?</head> ?<body> ???<div class="processcontainer"> ????<div id="processbar" style="width:0%;"></div> ???</div> ?</body> ?</html>JS实现 进度条 不用控件
原文地址：https://www.cnblogs.com/sea-stream/p/10449755.html