计时器与进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计时器与进度条</title>
<style type="text/css">
#outer
{
margin-top:100px;
border:solid black 1px;
background-color:white;
width:1004px;
height:54px;
}
#inner
{
background-color:red;
width:0px;
height:50px;
margin-left:2px;
margin-top:2px;
}
</style>
<script type="text/javascript">
function show()
{
if(document.getElementById("inner").offsetWidth<1000)
{
document.getElementById("inner").style.width=
document.getElementById("inner").offsetWidth+20+"px";//两个方法的区别：document.getElementById("inner").style.width结果直接为 “XXXpx”用于给属性直接赋值
} // document.getElementById("inner").offsetWidth 结果为数字需要手动加 “px”用于修改属性值
else
{
document.getElementById("inner").style.width=1000+"px";
stop();
}
}
var timer;
function start()
{
timer=window.setInterval(show,100);
}
function stop()
{
window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<div id="outer">
<div id="inner"></div>
</div>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>计时器与进度条</title>
<style type="text/css">
#outer
{
margin-top:100px;
border:solid black 1px;
background-color:white;
width:1004px;
height:54px;
}
#inner
{
background-color:red;
width:0px;
height:50px;
margin-left:2px;
margin-top:2px;
}
</style>
<script type="text/javascript">
function show()
{
if(document.getElementById("inner").offsetWidth<1000)
{
document.getElementById("inner").style.width=
document.getElementById("inner").offsetWidth+20+"px";//两个方法的区别：document.getElementById("inner").style.width结果直接为 “XXXpx”用于给属性直接赋值
} // document.getElementById("inner").offsetWidth 结果为数字需要手动加 “px”用于修改属性值
else
{
document.getElementById("inner").style.width=1000+"px";
stop();
}
}
var timer;
function start()
{
timer=window.setInterval(show,100);
}
function stop()
{
window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>