1.setTimeout()、clearTimeout(var param)

  • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只调用一次
  • clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作,参数必须是由 setTimeout() 返回的 ID 值
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
#mytime {
background: #bbb;
color: #fff;
display: block;
} .wrapper {
text-align: center;
width: 60%;
margin: 250px auto;
}
</style>
</head> <body> <div class="wrapper">
<h1 id=mytime>显示时间</h1>
<button id="stop" name="button" onclick="stop()">stop</button>
<button id="start" name="button" onclick="start()">start</button>
<button id="reset" name="button" onclick="reset()">reset</button>
</div>
</body>
<script type="text/javascript">
var h = m = s = ms = 0; //定义时,分,秒,毫秒并初始化为0;
var time = 0; function timer() { //定义计时函数
ms = ms + 50; //毫秒
if(ms >= 1000) {
ms = 0;
s = s + 1; //秒
}
if(s >= 60) {
s = 0;
m = m + 1; //分钟
}
if(m >= 60) {
m = 0;
h = h + 1; //小时
}
str = toDub(h) + "时" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";
mytime = document.getElementById('mytime');
mytime.innerHTML = str; time = setTimeout(timer, 50);
} function reset() { //重置
clearInterval(time);
h = m = s = ms = 0;
document.getElementById('mytime').innerHTML = "00时00分00秒0000毫秒";
document.getElementById("start").removeAttribute("disabled");
document.getElementById("stop").setAttribute("disabled", true);
} function start() { //开始
time =setTimeout(timer,50);
document.getElementById("start").setAttribute("disabled", true);
document.getElementById("stop").removeAttribute("disabled");
} function stop() { //暂停
clearTimeout(time);
document.getElementById("start").removeAttribute("disabled");
document.getElementById("stop").setAttribute("disabled", true);
} function toDub(n) { //补0操作
if(n < 10) {
return "0" + n;
} else {
return "" + n;
}
} function toDubms(n) { //给毫秒补0操作
if(n < 10) {
return "00" + n;
} else {
return "0" + n;
} }
</script> </html>

   2.setInterval()、clearInterval(var param)

  • setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,循环调用
  • clearInterval(var param) 方法可取消由 setInterval() 函数设定的定时执行操作,参数必须是由 setInterval() 返回的 ID 值
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
#mytime {
background: #bbb;
color: #fff;
display: block;
} .wrapper {
text-align: center;
width: 60%;
margin: 250px auto;
}
</style>
</head> <body> <div class="wrapper">
<h1 id=mytime>显示时间</h1>
<button id="stop" name="button" onclick="stop()">stop</button>
<button id="start" name="button" onclick="start()">start</button>
<button id="reset" name="button" onclick="reset()">reset</button>
</div>
</body>
<script type="text/javascript">
var h = m = s = ms = 0; //定义时,分,秒,毫秒并初始化为0;
var time = 0; function timer() { //定义计时函数
ms = ms + 50; //毫秒
if(ms >= 1000) {
ms = 0;
s = s + 1; //秒
}
if(s >= 60) {
s = 0;
m = m + 1; //分钟
}
if(m >= 60) {
m = 0;
h = h + 1; //小时
}
str = toDub(h) + "时" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";
mytime = document.getElementById('mytime');
mytime.innerHTML = str;
} function reset() { //重置
clearInterval(time);
h = m = s = ms = 0;
document.getElementById('mytime').innerHTML = "00时00分00秒0000毫秒";
document.getElementById("start").removeAttribute("disabled");
document.getElementById("stop").setAttribute("disabled", true);
} function start() { //开始
time = setInterval(timer, 50);
document.getElementById("start").setAttribute("disabled", true);
document.getElementById("stop").removeAttribute("disabled");
} function stop() { //暂停
clearInterval(time);
document.getElementById("start").removeAttribute("disabled");
document.getElementById("stop").setAttribute("disabled", true);
} function toDub(n) { //补0操作
if(n < 10) {
return "0" + n;
} else {
return "" + n;
}
} function toDubms(n) { //给毫秒补0操作
if(n < 10) {
return "00" + n;
} else {
return "0" + n;
} }
</script> </html>

JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)的更多相关文章

  1. JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结

    已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...

  2. javascript定时器:setTimeout与setInterval

    概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...

  3. 关闭定时器(setTimeout/clearTimeout|setInterval/clearInterval)

    1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:timerI ...

  4. JavaScript定时器详解

    假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...

  5. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  6. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

  7. Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  8. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  9. javascript 定时器 timer setTimeout setInterval (js for循环如何等待几秒再循环)

    实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 cance ...

随机推荐

  1. Java之旅_高级教程_实例_文件操作

    1.文件写入 import java.io.*; public class MainClass{ public static void main(String[] args){ try{ Buffer ...

  2. kafka后台启动的命令

    kafka如果直接启动会出现问题,就是信息会打印在控制台,就会出现在控制台. 然后关闭窗口,kafka随之关闭,然后启动以下的命令就可以实现. ./kafka-server-start.sh ../c ...

  3. es基本查询相关的

    一.获取索引的mapping GET linewell_assets_mgt_es/lw_devices/_mapping

  4. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

  5. js判断开始时间不能小于结束时间

    function validTime(startTime,endTime){ var arr1 = startTime.split("-");       var arr2 = e ...

  6. Email实例

    import java.util.Properties; import javax.activation.DataHandler; import javax.activation.DataSource ...

  7. cat 查看文件命令

    查看文件内容 [root@salt-server- .txt ada sada sadas -n 查看文件内容并显示行数 [root@salt-server- .txt ada sada sadas

  8. [py]数据结构和算法-冒泡排序

    用Python实现的数据结构与算法 数据结构和算法可以培养一个人的逻辑思维(推荐几本书) 逻辑思维培养 严蔚敏的数据结构(排序 查找 列表 堆栈 队列 树的简单部分) 大话数据结构 数据结构与算法分析 ...

  9. 由ngx.say和ngx.print差异引发的血案

    Jan 16, 2018openresty点击 最近上线一个项目,利用openresty在前面做反向代理,部分地址通过lua的http请求后端接口进行返回,在线下测试都没问题,公司预发灰度测试都通过了 ...

  10. “脚踢各大Python Web框架”,Sanic真有这能耐么?

    在Github上,Sanic第一句介绍语就是: "Sanic is a Flask-like Python 3.5+ web server that's written to go fast ...