JS中的计时器事件
JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。
JavaScript 一个设定的时间间隔之后来执行代码，称之为计时事件。
主要通过两个方法来实现：
1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
2.setTimeout() - 暂停指定的毫秒数后执行指定的代码
并且，这两个方法都是window对象的方法。
首先，介绍setInterval()方法，该方法值得是间隔一定的毫秒数不停的执行指定的代码。
语法：window.setInterval(”js代码，函数等“，毫秒数);
实例1：每三秒弹出一个hello
setInterval(function(){alert("Hello")},3000);
实例2：显示当前时间，通过按钮实现时间的停止，开始
<script type="text/javascript">
var myVar;
function startTimer(){
/*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/
myVar=setInterval(function(){myTimer()},1000);
}
function myTimer()/* 定义一个得到本地时间的函数*/
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function stopTimer()
{/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/
clearInterval(myVar);
}
</script>
setTimeout() 方法
在html或jsp中
<body>
<h4 id="demo"></h4>
<input type="button" onclick="startTimer()" value="开始">
<input type="button" onclick="stopTimer()" value="停止">
</body>
对于setTimeout()方法，指的是指定的毫秒数后执行指定的代码或方法。
语法：window.setTimeout("javascript 函数",毫秒数);
实例1：3秒钟后弹出”hello“提示框
setTimeout(function(){alert("Hello")},3000);
实例2：三秒钟后跳转到前一个页面
<script type="text/javascript">
setTimeout(function(){
window.history.back();
},3000);
</script>
如何执行停止呢？
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下：
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
} function myStopFunction()
{
clearTimeout(myVar);
}
以上就把js计时器的基本功能简要介绍了，具体的使用场景，想要深刻理解，只有到项目用到时方可有新的理会。
JS中的计时器事件的更多相关文章
- js中的计时器事件`setTimeout()` 和 `setInterval()`
js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- js中的计时器
在JS中做二级菜单时,被一个鼠标移出时隐藏的小问题困扰了很久. <script> function Menu(id){ var _this=this; this.obj=document. ...
- 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 中的自定义事件和模拟事件
在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...
- js中获取键盘事件【转】
<script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...
- js中获取键盘事件
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- linux下svn版本控制的常用命令大全
1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain 简写:s ...
- elasticsearch命令
如果安装了x-pack插件,需要验证 curl -u username:passwd 1.查看所有index curl -XGET localhost:/_cat/indices?v 2.清理所有in ...
- Django 实现登陆验证码
一 基本使用方法 Python生成随机验证码,需要使用PIL模块 安装: pip3 install pillow 基本使用 1 创建图片 from PIL import Image, ImageDra ...
- 以太坊难度炸弹是什么？极大抑制矿工继续以POW方式挖矿！
以太坊的“难度炸弹”(“Difficulty Bomb”)指的是,在挖掘算法中,使用以太币在区块链上对矿工进行奖励的难度越来越大.随着游戏变得更加复杂(矿工发现以太币难挣得多),在以太坊区块链上块的生 ...
- PAT 1039 到底买不买（20）（20 分）
1039 到底买不买(20)(20 分) 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要 ...
- hdu 1754(基础线段树) I Hate It
http://acm.hdu.edu.cn/showproblem.php?pid=1754 数据比较大,暴力会超时,所以明显是线段树,普通的线段树,结构体中多开一个值sum储存每个子区间的最大成绩, ...
- CF Round #509 (Div. 2)
前言:第一次打\(CF\),因为经验不足以及英语水平很烂,即便在机房大佬的带领下也是花了好久才读懂题目..\(A\)题直到\(11\)分钟才\(A\),题目一共才做了\(4\)题,太菜了.. A. H ...
- 0 or 1,1 and 0
最近小编遇到很头疼的的一件事 就是以下这几道运算题 ,以下结果是小编经过大量的运算得出的 一.或运算 1.0 or 1 结果为:1 2.1 or 0 结果为:1 3.1 or 2 结果为:1 4.2 ...
- centos7 下安装mongodb指南;
1.下载:https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.4.1.tgz; 2.解压缩; 3.文件存储在mongodb文件 ...
- swift 基本用法
Swift 也提供恒等(===)和不恒等(!==)这两个比较符来判断两个对象是否引用同一个对象实例. 判断字符串相等: let name = "world" if name == ...