JS绘制进度条

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
 <script>
  var progress = 0;
  var colors = new Array("#FFFF00","#FFCC99","#CCFF33","#FF3300","#6600FF","#66FF33","#0000CC","#990033","#CC3300");
  window.onload = function(){
   
   drawProgress();
   
  }

  function drawProgress() {
   progress += 10;
   var width = document.getElementById('progressbar').style.width;
   width = parseInt(width.substring(0,width.indexOf('px')));
   width += progress;
   document.getElementById('progressbar').style.width = width +"px";
   window.status = '加载进度' + progress + "%";
   document.all('progr').innerHTML = "<font color=blue size=2>加载进度:"+progress+"%</font>";
   var i = Math.round(Math.random()*10);
   if (i >= 10)
   {
    i = 9;
   }
   document.all('progressbar').style.backgroundColor = colors[i];
   if (progress < 100)
   {
    i = setTimeout('drawProgress()',500);
   }
   else {
    clearTimeout(i);
    window.location.href='http://www.baidu.com';
   }
  }
 </script>
 <span id='progr'></span>
 <div id='progressbar' style='width:10px;height:18px;background-color:#00FFFF'></div>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值