一个用javascript控制的进度条

进度条的设置需要两种代码实现:一种是更新进度条,一种是清空进度条,当进度条更新的时,需要用定时器setTimeout,它可以使进度条在每隔一段时间执行固定的javascript方法。当清空进度条时,只需将进度条的div的Visibility属性设置为hidden即可。 创建StyleSheet.css样式表 .divbody { z-index: 2; left:2%; visibility: hidden; cursor:crosshair; position:absolute; top:40px; width: 96%; background-color:#ffffcc; } P { color:#cc6633; font-weight:bold; } .divprogress { border-right:black 1px solid; padding-right:3px; border-top:black 1px solid; padding-left:3px; font-size:10pt; padding-bottom:2px; border-left:black 1px solid; padding-top:2px; border-bottom:black 1px solid; } 创建一个.aspx文件: href="StyleSheet.css" type="text/css" rel="stylesheet" /><script type="text/javascript"> //设置span元素的编号 var progressEnd=16; //设置进度条的颜色为蓝色 var progressColor="blue"; //设置进度条走动的时间---毫秒为单位 var progressInterval=350; //进度条的开始标志 var progressBegin=0; var progressTimer; function progress_clear(){ //清空定时器 clearTimeout(progressTimer); //隐藏div document.getElementById("framediv").style.visibility="hidden"; } function progress_update(){ //进度条开始加载 progressBegin++; //如果进度条的开始标志大于结束标志 if(progressBegin>progressEnd){ //就清空进度条 progress_clear(); }else{ //否则就更新进度条 document.getElementById("progress"+progressBegin).style.backgroundColor=progressColor; //在一定的时间间隔内循环更新进度条 progressTimer=setTimeout("progress_update()",progressInterval); } } function linkto(){ //显示div document.getElementById("framediv").style.visibility="visible"; //更新进度条 progress_update(); } </script>

正在连接站点,请稍侯。。。。。

                                               
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值