Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval
定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果。定时器不属于 javascript，是 window 对象提供的功能。
setTimeout 用法：
window.setTimeout('语句',毫秒); //指定毫秒后执行一次语句
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p id="p">定时改变文字</p>
<script>
function change(){
document.getElementById("p").innerHTML = "已更换";
}
window.setTimeout("change()", 3000); //3秒之后执行change方法
</script>
</body>
</html>
优化：定时器的效果之上加上倒计时效果
setInterval('语句',毫秒); //每隔指定毫秒执行一次
清除定时器：
clearInterval();
和
clearTimeout();
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<input type="button" name="time" value="5">
<p id="p">定时改变文字</p>
<script>
function change(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value)-1;
inp.value = time;
if(time == 0){
document.getElementById("p").innerHTML = "已更换";
clearInterval(clock); //清除定时器
}
}
var clock = setInterval("change()", 1000); //每秒钟执行一次
</script>
</body>
</html>
【例】如果不适用 setInterval，只使用 setTimeout，达到每过一段时间执行一次的效果
使用 setTimeout 实现 setInterval 的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<input type="button" name="time" value="5">
<p id="p">定时改变文字</p>
<script>
var clock = null;
function change(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value)-1;
inp.value = time;
if(time == 0){
document.getElementById("p").innerHTML = "已更换";
clearTimeout(clock);
return;
}
setTimeout("change()", 1000);
}
var clock = setTimeout("change()", 1000); //每秒钟执行一次
</script>
</body>
</html>
Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval的更多相关文章
- JS 定时器 setTimeout 与 setInterval 的区别和用法
定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...
- 定时器setTimeout()和setInterval()使用心得整理
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...
- 有关定时器setTimeout()、setInterval()详解
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...
- 高级定时器-setTimeout()、setInterval()、链式setTimeout()
使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...
- 20180904 定时器setTimeout和setInterval回调问题
引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...
- JavaScript 的定时（Timing ）事件——setTimeout()与setInterval()
JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events). ㈠Timing 事件 ⑴window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件. ...
- 使用定时器settimeout、setInterval执行能传递参数的函数
无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于 ...
- javascript定时器:setTimeout与setInterval
概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...
- JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结
已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...
随机推荐
- 一塔湖图（codevs 1024）
题目描述 Description 小松所在的PK大学校园又称作燕园,是一个十分美丽的校园.有博雅塔,未名湖,亚洲最大的高校图书馆,人称“一塔湖图”.但是由于燕园的历史比较悠久,所以很多的老房子都要不断 ...
- Diablo3
1.装备 主手:元素弓 副手:精细箭袋 头: 胸:燃火外套 手:娜塔亚的手感 护腕:稳击护腕 戒指:罗盘玫瑰+布尔凯索的婚戒 颈部:旅者之誓 腰:科雷姆的强力腰带(速度加25%) 腿:深渊挖掘裤 脚: ...
- android之WakeLock机制浅析
转自:http://blog.sina.com.cn/s/blog_4ad7c2540101n2k2.html 应用程序耗电的实质,是所启用的硬件在消耗电量. 手机的耗电单元 CPU: 应用处理器( ...
- linux中的解压，压缩命令
tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...
- 免费电子书：微软Azure基础之Azure Automation
(此文章同时发表在本人微信公众号"dotNET每日精华文章") Azure Automation是Azure内置的一项自动化运维基础功能,微软为了让大家更快上手使用这项功能,特意推 ...
- Java判断文件编码格式
转自:http://blog.csdn.net/zhangzh332/article/details/6719025 一般情况下我们遇到的文件编码格式为GBK或者UTF-8.由于中文Windows默认 ...
- Codeforces Round #360 (Div. 2) E. The Values You Can Make DP
E. The Values You Can Make Pari wants to buy an expensive chocolate from Arya. She has n coins, ...
- windows 并发与同步 学习笔记
测试 5.2 windows 中断与异常 1.外部硬件中断是通过处理器上的中断引脚管或者本地APIC的内置模块来发生的:对于一个处理器,一旦被中单, 某个预先被设定的中断服务例程就被执行! 2.处理器 ...
- LIST_ENTRY
一个常见的 Windows 2000 数据类型是 LIST_ENTRY 结构.内核使用该结构将所有对象维护在一个双向链表中.一个对象分属多个链表是很常见的, Flink 成员是一个向前链接,指向下一个 ...
- HUST1024 dance party（最大流）
题目大概说有n男n女,男的每回合要和不同女的跳舞,男女都有自己喜欢一起跳舞的对象,他们最多能容忍和k个不喜欢的人跳舞,问舞会最多能进行几个回合. 二分枚举回合用最大流判断:男和女各拆成两点i.i'和j ...