js计时器事件几个例子

发布时间:2019-10-21编辑:脚本学堂
有关js计时器的几个例子,js中的计时器事件用法,在一个设定的时间间隔之后来执行代码,通过实例学习下js计时器事件的原理与用法。

javascript计时器事件:一个设定的时间间隔之后来执行代码,称之为计时事件。
 
主要通过两个方法实现:
1,setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
2,setTimeout() - 暂停指定的毫秒数后执行指定的代码。

推荐:javascript计时器工作原理
 
并且,这两个方法都是window对象的方法。
 
首先,介绍setInterval()方法,该方法值得是间隔一定的毫秒数不停的执行指定的代码。
 
语法:window.setInterval(”js代码,函数等“,毫秒数);
 
例1:每三秒弹出一个hello
 

setInterval(function(){alert("Hello")},3000);
 

 
例2:显示当前时间,通过按钮实现时间的停止,开始
 

复制代码 代码示例:
<script type="text/javascript">
var myVar;
function startTimer(){
/*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/
myVar=setInterval(function(){myTimer()},1000);
}
function myTimer()/* 定义一个得到本地时间的函数*/
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function stopTimer()
{/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/
clearInterval(myVar);
} // www.jb200.com
</script>

setTimeout() 方法
 
在html或jsp中
 

<body>
<h4 id="demo"></h4>
<input type="button" onclick="startTimer()" value="开始">
<input type="button" onclick="stopTimer()" value="停止">
</body>
 

 
对于setTimeout()方法,指的是指定的毫秒数后执行指定的代码或方法。
 
语法:window.setTimeout("javascript 函数",毫秒数);
 
例1:3秒钟后弹出”hello“提示框
 

setTimeout(function(){alert("Hello")},3000);
 

 
例2:三秒钟后跳转到前一个页面
 

<script type="text/javascript">
setTimeout(function(){
window.history.back();
},3000);
</script>

如何执行停止?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
注意,myVar必须是一个全局变量

例子:
 

var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
clearTimeout(myVar);
}