JavaScript Timing 事件及两种时钟写法
JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件( Timing Events)。
--------------------------------------------------------------------------------------------------------------------------------------------
Timing 事件
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法:
- setTimeout(function, milliseconds)
- 在等待指定的毫秒数后执行函数。
- setInterval(function, milliseconds)
- 等同于 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 事件及两种时钟写法的更多相关文章
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- nodejs触发事件的两种方式
nodejs触发事件的两种方式: 方式之一:通过实例化events.EventEmitter //引入events模块 var events = require('events'); //初始化eve ...
- 转--Android按钮单击事件的四种常用写法总结
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的 ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。
JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上. Java(由 Sun 发明)是更复杂的编程语言. ECMA-262 是 JavaScript 标准的官方名称. Jav ...
- Android按钮单击事件的四种常用写法
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...
- javascript获取属性的两种方法及区别
javascript获取属性有两种方式,点或者中括号: var obj={} obj.x=1 console.log(obj.x)//1 第一种方式,x是字面量 try{ console.log(ob ...
- 阻止事件冒泡两种方式:event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- jquery阻止事件的两种实现方式
再阻止事件冒泡的方面,jquery有两种方式: 一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1&qu ...
随机推荐
- aws产品整理
计算 Amazon EC2:弹性虚拟机 AWS Batch:批处理计算 Amazon ECR:Docker容器管理 Amazon ECS:高度可扩展的快速容器管理服务 Amazon EKS:在AWS上 ...
- 【day03】php
一.类型判别函数库 1.安装:类型判别函数库是PHPCORE的组成部分,不用安装 2. (1)is_integer|is_int|is_long 描述: 检测变量是否是整数 格式: ...
- for循环包含多个双引号怎么办?windows
for循环包含多个双引号怎么办?windows@echo offsetlocal EnableDelayedExpansionset "sed=%~sdp0sed"echo %se ...
- Linux性能优化实战学习笔记:第四讲
一.怎么查看系统上下文切换情况 通过前面学习我么你知道,过多的上下文切换,会把CPU时间消耗在寄存器.内核栈以及虚拟内存等数据的保存和回复上,缩短进程真正运行的时间,成了系统性能大幅下降的一个元凶 既 ...
- Eureka工作原理分析
demo源码地址:https://github.com/flyingJiang/SpringCloud 首先,单独使用Eureka. Eureka整合Ribbon 未完待续……
- mysql出生日期转成年龄
可以直接用数据库函数进行转换,省去java代码转换的麻烦 SELECT TIMESTAMPDIFF(YEAR, '1988/01/10', CURDATE()) 且此函数容错很好,就算是null,‘ ...
- 常用shell脚本
[脚本1]打印形状打印等腰三角形.直角三角形.倒直角三角形.菱形 #!/bin/bash # 等腰三角形 read -p "Please input the length: " n ...
- git取消【删除】已经提交的文件(夹)跟踪
git rm -r --cached <fold> 不删除本地文件 git rm -r --f <fold> 删除本地文件 git rm --cached <file&g ...
- js原型和原型链,以及__proto__、prototype属性
__proto__和prototype属性: 1.__proto__属性: 在JS里,万物皆对象(函数是对象.原型也是对象...).对象都具有属性__proto__,这个属性会指向该对象的原型. 2. ...
- python笔记 面向对象编程从入门到高级
目录: 一.概念 二.方法 2.1组合 2.2继承 2.3多态 2.4封装 2.5归一化设计 三.面向对象高级 3.1 反射(自省) 3.2 内置方法__getatter__, __ ...