前端开发和网页设计_进度条制作

网页开发前端怎么样?|网页前端开发|网页制作 web前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>网页进度条</title>
<style>
*{
padding:0;
margin:0;
}
body{
font-family:’Microsoft YaHei’
}
#progressBox{
width:300px;
height:40px;
border:1pxsolid#c8c8c8;
background:#fff;
position:relative;
}
#progressBar{
position:absolute;
top:0;
left:0;
z-index:2;
height:40px;
width:100%;
line-height:40px;
color:#fff;
text-align:center;
font-size:20px;
font-weight:bold;
clip:rect(0px,40px,40px,0);
background:#00a1f5
}
#progressText{
position:absolute;
left:0;
top:0;
z-index:1;
width:100%;
height:40px;
line-height:40px;
color:#000;
text-align:center;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<script>
window.onload = function () {
variNow=0;
vartiemr=setInterval(function(){
if (iNow==100) {
clearInterval(tiemr)
}else{
iNow+=2;
progressFn(iNow)
}
},30)
functionprogressFn(cent){
varoDiv1=document.getElementById(‘progressBox’);
varoDiv2=document.getElementById(‘progressBar’);
varoDiv3=document.getElementById(‘progressText’);
varallWidth=parseInt(getStyle(oDiv1,’width’));
oDiv2.innerHTML=cent+’%’;
oDiv3.innerHTML=cent+’%’;
oDiv2.style.clip =”rect(0px,”+cent/100*allWidth+”px,40px,0)”;
functiongetStyle(obj,attr){
if (obj.currentStyle) {
returnobj.currentStyle[attr]
}else{
returngetComputedStyle(obj,false)[attr]
}
}
}
}
</script>
<body>
<divid=”progressBox”>
<divid=”progressBar”>0%</div>
<divid=”progressText”>0%</div>
</div>
</body>
</html>
网页开发前端难吗?|自学前端开发从哪方面入手?|web 前端开发自学
» 本文来自:前端开发者 » 《前端开发和网页设计_进度条制作》
» 本文链接地址:https://www.rokub.com/3693.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!