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中的计时器事件的更多相关文章

  1. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  2. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  3. js中的计时器

    在JS中做二级菜单时,被一个鼠标移出时隐藏的小问题困扰了很久. <script> function Menu(id){ var _this=this; this.obj=document. ...

  4. 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS 中的自定义事件和模拟事件

    在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...

  7. js中获取键盘事件【转】

    <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...

  8. js中获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

  9. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. POPUP_TO_CONFIRM的使用方法

    CALL FUNCTION 'POPUP_TO_CONFIRM'       EXPORTING         TEXT_QUESTION               = '是否要打印凭证!'    ...

  2. golang 创建一个简单的连接池，减少频繁的创建与关闭

    一.连接池的描述图片如下: 二.连接池代码如下: package main; import ( "time" "sync" "errors" ...

  3. golang 创建一个简单的广播echo服务器

    package main; import ( "net" "fmt" "bufio" ) //里面的代码部分参考cmu440课程 //htt ...

  4. ios证书安装和打包流程

    iOS开发流程 1.拿到源文件 2文件目录大致名字 一.证书配置 参考网站:http://www.jianshu.com/p/9d9e3699515e    (证书配置参考地址) 准备工作 首先要有苹 ...

  5. 9.4-9.19 h5日记总结

    总结: 1.标签 (1)单.双标签 (2)块级.行级标签 (3)标签的属性 2.CSS (1)选择器 *.id.class.标签.后代.子代.并集.交集.伪类.结构 (2)层叠性,即选择器权重的计算 ...

  6. this指针 new 和delete

    指针类型的函数:函数的返回值是指针. 不要将非静态局部地址用作函数的返回值,离开函数后就失效了 在子函数中定义局部变量后将其地址返回给函数就是非法地址 在子函数中用new操作取得的内存地址返回给主函数 ...

  7. 记录ssh暴力破解的密码字典

    之前我已经在wooyun和91ri上发表了这篇文章,今天转到51cto上... 默认的ssh日志是不带密码记录功能的,现在想把登录密码记录下来,这样就可以搜集黑客的ssh爆破字典了,从而可以反扫回去. ...

  8. Intellij idea 系列教程目录

    Intellij idea 系列教程目录 Intellij idea 系列教程之破解方法 Intellij idea 系列教程之常用快捷键 Intellij idea 系列教程之常用配置项 每天用心记 ...

  9. Viewer.js 是一款强大的 jQuery 图像浏览插件。

    https://blog.csdn.net/qq_29132907/article/details/80136023 一.效果图  二.代码<!DOCTYPE html><html ...

  10. 深入C# String类

    深入C# String类 C#中的String类 他是专门处理字符串的(String),他在System的命名空间下,在C#中我们使用的是string 小写的string只是大写的String的一个别 ...