setInterval:定时器
按照指定的毫秒数重复执行<表达式>,直至窗口、框架被关闭或执行clearInterval。
格式:[定时器对象名=] setInterval(“<表达式>”,毫秒)
书写语法:setInterval(function(){执行的内容…},毫秒数);
setInterval(方法名称,毫秒数);
说明:无法传参,并且方法名称后面不能书写()
示例:
var b='';
window.onload = function(){
b = setInterval(show,1000);
}
function show(){
alert("大家好");
}
表示调用show方法,1000毫秒执行一次
setInterval(“方法名称()”,毫秒数);
说明:可以传参,但需要注意字符串拼接规则
示例:
var b ='';
var c ='大中国';
window.onload = function(){
b = setInterval('show("'+c+'")',1000);
}
function show(text){
alert(text);
}
表示传入参数c,1000毫秒执行一次
clearInterval:终止定时器
格式:clearInterval(定时器对象名)
var a ="";
function text(){
a = setInterval(function(){
alert("你好");
},3000);
}
function text_stop(){
clearInterval(a);
}
setTimeout:延时执行,仅执行一次
语法:setTimeout("<表达式>",毫秒数);
使用 clearTimeout() 来阻止函数的执行
var gt = '';
function get_Time(){
gt = setTimeout(function(){
alert("我是setTimeout");
},5000);
}
function close_Time(){
clearTimeout(gt);
}
练习
随机点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px solid red;
margin:0 auto;
}
#luck{
width:100%;
height:100px;
line-height:100px;
background:yellow;
text-align:center;
font-size:2em;
}
#open{
width:100%;
height:100px;
line-height:100px;
background:green;
text-align:center;
font-size:2em;
}
</style>
</head>
<body>
<div class="box">
<div id="luck">北京</div>
<div id="open" onclick="ready()">开始</div>
</div>
<script type="text/javascript">
var so=["上海","北京","天津","重庆","兰州","厦门"]
var t;
function ready(){
var luck = document.getElementById("luck");
var open = document.getElementById('open');
if (open.innerHTML=='开始') {
open.innerHTML="结束";
t=setInterval(function(){
luck.innerHTML=so[Math.round(Math.random()*(so.length-1))];
},200);
}else{
open.innerHTML="开始";
clearInterval(t);
}
}
</script>
</body>
</html>