JavaScript 可以在时间间隔内执行。

这就是所谓的定时事件( Timing Events)。

--------------------------------------------------------------------------------------------------------------------------------------------

Timing 事件

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法:

setTimeout(functionmilliseconds)
在等待指定的毫秒数后执行函数。
setInterval(functionmilliseconds)
等同于 setTimeout(),但持续重复执行该函数,可以用来写时钟,详情见下方例子

setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

setTimeout() 方法

window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。

实例

单击按钮。等待 3 秒,然后页面会提示 "Hello":

<button onclick="setTimeout(myFunction, 3000)">试一试</button>

<script>
function myFunction() {
alert('Hello');
}
</script>

完整实例:

<!DOCTYPE html>
<html>
<body> <p>点击“试一试”。等待 3 秒钟,页面将提示“Hello”。</p> <button onclick="setTimeout(myFunction, 3000);">试一试</button> <script>
function myFunction() {
alert('Hello');
}
</script> </body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------------

如何停止执行?

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不带 window 前缀来写。

clearTimeout() 使用从 setTimeout() 返回的变量:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

实例

类似上例,但是添加了“停止”按钮:

<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>

<button onclick="clearTimeout(myVar)">停止执行</button>

完整实例:

<!DOCTYPE html>
<html>
<body> <p>点击“试一试”。等 3 秒。该页面将提醒“Hello”。</p> <p>单击“停止”以阻止第一个函数执行。</p> <p>(在 3 秒钟之前,您必须单击“停止”。)</p> <button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button> <button onclick="clearTimeout(myVar)">停止</button> <script>
function myFunction() {
alert("Hello");
}
</script>
</body>
</html>

---------------------------------------------------------------------------------------------

setInterval() 方法

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数。

第二个参数每个执行之间的时间间隔的长度。

本例每秒执行一次函数 "myTimer"(就像数字手表)。

实例

显示当前时间:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

完整实例

<!DOCTYPE html>
<html>
<body> <p>此页面上的脚本启动这个时钟:</p> <p id="demo"></p> <script>
var myVar = setInterval(myTimer, 1000); function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script> </body>
</html>

一秒有 1000 毫秒。

--------------------------------------------------------------------------------------------------------------------------------------------

如何停止执行?

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

clearInterval() 方法使用从 setInterval() 返回的变量:

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

实例

类似上例,但是我们添加了一个“停止时间”按钮:

<p id="demo"></p>

<button onclick="clearInterval(myVar)">停止时间</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

完整实例:

<!DOCTYPE html>
<html>
<body> <p>此页面上的脚本启动这个时钟:</p> <p id="demo"></p> <button onclick="clearInterval(myVar)">停止时间</button> <script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script> </body>
</html>

 

更多实例

另一个简单的计时
<!DOCTYPE html>
<html>
<body> <button onclick="timedText()">试一试</button> <p id="demo">点击“试一试”。我将在两秒,四秒和六秒过后显示。</p> <script>
function timedText() {
setTimeout(myTimeout1, 2000)
setTimeout(myTimeout2, 4000)
setTimeout(myTimeout3, 6000)
}
function myTimeout1() {
document.getElementById("demo").innerHTML = "2 秒";
}
function myTimeout2() {
document.getElementById("demo").innerHTML = "4 秒";
}
function myTimeout3() {
document.getElementById("demo").innerHTML = "6 秒";
}
</script> </body>
</html>
由计时时间创建的时钟
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // 在数字 < 10 之前加零
return i;
}
</script>
</head> <body onload="startTime()"> <div id="txt"></div> </body>
</html>

  

JavaScript Timing 事件及两种时钟写法的更多相关文章

  1. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  2. nodejs触发事件的两种方式

    nodejs触发事件的两种方式: 方式之一:通过实例化events.EventEmitter //引入events模块 var events = require('events'); //初始化eve ...

  3. 转--Android按钮单击事件的四种常用写法总结

    这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下     很多学习Android程序设计的人都会发现每个人对代码的 ...

  4. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  5. JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。

    JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上. Java(由 Sun 发明)是更复杂的编程语言. ECMA-262 是 JavaScript 标准的官方名称. Jav ...

  6. Android按钮单击事件的四种常用写法

    这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...

  7. javascript获取属性的两种方法及区别

    javascript获取属性有两种方式,点或者中括号: var obj={} obj.x=1 console.log(obj.x)//1 第一种方式,x是字面量 try{ console.log(ob ...

  8. 阻止事件冒泡两种方式:event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  9. jquery阻止事件的两种实现方式

    再阻止事件冒泡的方面,jquery有两种方式: 一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1&qu ...

随机推荐

  1. aws产品整理

    计算 Amazon EC2:弹性虚拟机 AWS Batch:批处理计算 Amazon ECR:Docker容器管理 Amazon ECS:高度可扩展的快速容器管理服务 Amazon EKS:在AWS上 ...

  2. 【day03】php

    一.类型判别函数库 1.安装:类型判别函数库是PHPCORE的组成部分,不用安装 2.  (1)is_integer|is_int|is_long     描述:  检测变量是否是整数     格式: ...

  3. for循环包含多个双引号怎么办?windows

    for循环包含多个双引号怎么办?windows@echo offsetlocal EnableDelayedExpansionset "sed=%~sdp0sed"echo %se ...

  4. Linux性能优化实战学习笔记:第四讲

    一.怎么查看系统上下文切换情况 通过前面学习我么你知道,过多的上下文切换,会把CPU时间消耗在寄存器.内核栈以及虚拟内存等数据的保存和回复上,缩短进程真正运行的时间,成了系统性能大幅下降的一个元凶 既 ...

  5. Eureka工作原理分析

    demo源码地址:https://github.com/flyingJiang/SpringCloud 首先,单独使用Eureka. Eureka整合Ribbon 未完待续……

  6. mysql出生日期转成年龄

    可以直接用数据库函数进行转换,省去java代码转换的麻烦 SELECT  TIMESTAMPDIFF(YEAR, '1988/01/10', CURDATE()) 且此函数容错很好,就算是null,‘ ...

  7. 常用shell脚本

    [脚本1]打印形状打印等腰三角形.直角三角形.倒直角三角形.菱形 #!/bin/bash # 等腰三角形 read -p "Please input the length: " n ...

  8. git取消【删除】已经提交的文件(夹)跟踪

    git rm -r --cached <fold> 不删除本地文件 git rm -r --f <fold> 删除本地文件 git rm --cached <file&g ...

  9. js原型和原型链,以及__proto__、prototype属性

    __proto__和prototype属性: 1.__proto__属性: 在JS里,万物皆对象(函数是对象.原型也是对象...).对象都具有属性__proto__,这个属性会指向该对象的原型. 2. ...

  10. python笔记 面向对象编程从入门到高级

    目录: 一.概念 二.方法    2.1组合 2.2继承 2.3多态 2.4封装 2.5归一化设计 三.面向对象高级   3.1   反射(自省) 3.2   内置方法__getatter__, __ ...