1、Javascript中的定时器：
- window对象下面的方法window.setInterval()
(1)setinterval
setInterval(“function”,time)重复执行某项操作，时间单位是毫秒
clearInterval(对象)清除已设置的setInterval对象
(2)setTimeout
setTimeout运用在延迟一段时间，再进行某项操作
setTimeout("function",time),setTimeout不会重复
clearTimeout(对象)清除已设置的setTimeout对象
2、示例：
<html>
<head>
<title>这是一个进度条测试网页</title>
<style type="text/css">
#outer
{
margin-top:100px;
border:solid black 1px;
background-color:white;
width:1004px;
height:54px;
}
#inner
{
background-color:blue;
width:0px;
height:50px;
margin-left:2px;
margin-top:2px;
}
</style>
<script language="javascript">
function show()
{
if(document.getElementById("inner").offsetWidth<1000)
{
document.getElementById("inner").style.width=
document.getElementById("inner").offsetWidth+20+"px";
console.log(document.getElementById("inner").offsetWidth);//通过控制台日志查看每秒进度
}
else
{
document.getElementById("inner").style.Width=1000+"px"; //超过1000,则按照1000计算
stop();
}
}
var timer; //定义全局变量timer
function start() //开始时加载
{
timer=window.setInterval(show,200); //每200ms显示20px的进度
}
function stop()
{
window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
执行结果
网友评论