延时

<html>
<head>
<meta charset="UTF-8">
<title>延时</title>
<style>
.redbord
{
border: 1px solid red;
width: 100px;
height: 100px;
margin-top: 20px;
}
</style>
</head>
<body>
<input type="button" value="setInterval" onclick="setintervalClick()"/>
<input type="button" value="setTimeOut" onclick="setTimeOutClick()"/>
<div id="time" class="redbord"></div>

<script type="text/javascript" src="js/yanshi.js"></script>
</body>
</html>

setinterval

//此方法会一直调用，直到关闭窗口，或执行清除方法clearInterval()
function setintervalClick(){
var i=0;
//设置一个变量等于方法，清除此方法是用到该变量
var time=setInterval(function(){
i++;
if(i>3)
{
clearInterval(time)
}
document.getElementById("time").innerText=i;
},1000);
}

setTimeOut

//此方法只执行一次
function setTimeOutClick(){
var setT=0;
setTimeout(function(){
setT++;
document.getElementById("time").innerText="setTimeOut"+setT;
},1000)
}

posted @ 2017-03-17 11:30  bokeyuanjp  阅读(176)  评论(0)    收藏  举报