<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下载进度条</title>
<style>
h2{color:#ccc;font-size:12px;height:20px;}
p{width:1px;height:20px;background:red;position:absolute;left:0;top:-16px;z-index:1;}
div{width:500px;height:20px;background:#ccc;position:absolute;top:25px;opacity:0.6;}
#btn{margin-top:10px;}
</style>
</head>
<body>
<h2></h2>
<div>
<p id="p1"></p>
</div>
<button id="btn">点击下载</button>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
$("btn").οnclick=function(){
var count=1,forWord=5;
var timer=setInterval(function(){
$("p1").style.width=(count*forWord)+"px";
count+=Math.random()*6;
var H2=document.getElementsByTagName("h2")[0];
H2.innerHTML=parseInt(count)+'%';
if(parseInt(count)>=100){
H2.innerHTML='下载完成!';
}
if(count>100){
clearInterval(timer);
}
},100)
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>下载进度条</title>
<style>
h2{color:#ccc;font-size:12px;height:20px;}
p{width:1px;height:20px;background:red;position:absolute;left:0;top:-16px;z-index:1;}
div{width:500px;height:20px;background:#ccc;position:absolute;top:25px;opacity:0.6;}
#btn{margin-top:10px;}
</style>
</head>
<body>
<h2></h2>
<div>
<p id="p1"></p>
</div>
<button id="btn">点击下载</button>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
$("btn").οnclick=function(){
var count=1,forWord=5;
var timer=setInterval(function(){
$("p1").style.width=(count*forWord)+"px";
count+=Math.random()*6;
var H2=document.getElementsByTagName("h2")[0];
H2.innerHTML=parseInt(count)+'%';
if(parseInt(count)>=100){
H2.innerHTML='下载完成!';
}
if(count>100){
clearInterval(timer);
}
},100)
}
</script>
</html>
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
