进度条的设置需要两种代码实现:一种是更新进度条,一种是清空进度条,当进度条更新的时,需要用定时器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>
一个用javascript控制的进度条
最新推荐文章于 2023-03-20 15:02:02 发布