JavaScript计时事件

最新推荐文章于 2022-02-16 20:36:00 发布

Q_Jimmy

最新推荐文章于 2022-02-16 20:36:00 发布

阅读量357

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/Q_Jimmy/article/details/50299247

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript计时事件

概念：设定一个时间间隔之后来执行代码，而不是在函数被调用后立即执
行。
主要有两个关键方法：
setInterval()-间隔指定的毫秒数不停地执行指定的代码。
setTimeout()-暂停指定的毫秒数后执行指定的代码。
它们都是HTML DOM Window对象的两个方法

（1）setInterval()的使用
语法格式：

setInterval("函数（function）",间隔时间毫秒数);

实例1：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>点击按钮，3秒钟弹出对话框</p>
<p>之后每隔3秒自动弹出对话框</p>
<button οnclick="myFunction()">点击开始</button>
<script>
function myFunction(){
setInterval(function(){alert("你好")},3000);
}
</script>
</body>
</html>

实例2：显示当前时间
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>在页面上显示时钟</p>
<p id="demo"></p>
<script>
function myTime(){
var d=new Date();//创建时间对象
var t= d.toLocaleTimeString();//获取当地时间
document.getElementById("demo").innerHTML=t;
}
var time=setInterval(function(){myTime()},1000);
</script>
</body>
</html>

若要停止执行：
clearInterval()方法用于停止setInterval()方法执行的函数代码。
要使用clearInterval()方法，在创建计数法时必须使用全局变量：
比如：a=setInterval("函数（function）",间隔时间毫秒数);
然后使用clearInterval() 方法来停止执行。

多说无益，下面我们用一个实例来理解：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>在页面上显示时钟</p>
<p id="demo"></p>
<button οnclick="stopFunction()">点击停止</button>
<script>
function myTime(){
var d=new Date();//创建时间对象
var t= d.toLocaleTimeString();//获取当地时间
document.getElementById("demo").innerHTML=t;
}
var time=setInterval(function(){myTime()},1000);
function stopFunction()//停止函数的方法，在上面onclick中调用
{
clearInterval(time);
}
</script>
</body>
</html>

(2)setTimeout()方法
语法：
setTimeout("javascript 函数",毫秒数);
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如
alertMsg()"。第二个参数指示从当前起多少毫秒后执行第一个参数。

关键代码：
<button οnclick="myFunction()">点击开始</button>
<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>

停止该函数：
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
要使用clearTimeout() 方法, 必须在创建超时方法中（setTimeout）使用全局变量:
比如：a=setInterval("函数（function）",间隔时间毫秒数);

关键代码：
<script>
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()//用于停止执行的函数
{
clearTimeout(myVar);
}
</script>