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. tomcat配置的环境变量catalina.home和catalina.base 区别

    本篇文章原创地址为:http://blog.csdn.net/you23hai45/article/details/27726147 这两个属性仅在你需要安装多个Tomcat实例而不想安装多个软件备份 ...

  2. jQuery Dom对象操作 增、删、改、复制、包裹

    1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...

  3. Liunx touch

    http://blog.csdn.net/tanga842428/article/category/6355419 linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时 ...

  4. Linux命令大全完整版

      1. linux系统管理命令 adduser 功能说明:新增用户帐号.语 法:adduser补充说明:在Slackware中,adduser指令是个script程序,利用交谈的方式取得输入的用户帐 ...

  5. Luogu 1273 有线电视网 - 树形背包

    Description 树形背包, 遍历到一个节点, 枚举它的每个子节点要选择多少个用户进行转移. Code #include<cstring> #include<cstdio> ...

  6. windows无法停止 服务 错误1053 服务没有及时响应

    windows无法停止 服务 错误1053 服务没有及时响应 服务程序.exe -st

  7. Python之线程与进程

    今天我们来了解一下Python的线程和进程的管理机制 首先,我们要了解下线程跟进程的概念: 线程(Thread)是操作系统能够进行运算调度的最小的单位,是一堆cpu的指令.他被包含在进程中,是进程中的 ...

  8. java集合示例 小心重载的陷阱

    package com.hra.riskprice; import com.hra.riskprice.SysEnum.Factor_Type; import org.springframework. ...

  9. Partition Array Into Three Parts With Equal Sum LT1013

    Given an array A of integers, return true if and only if we can partition the array into three non-e ...

  10. datagrid 扩展 页脚 合计功能

    效果图:合计信息展示在页脚中(showFooter:true) code: <!DOCTYPE html> <html> <head> <meta chars ...