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. sql2000三个表的级联删除

    sql2000中三个表级联删除 create table a(    id int primary key,    Content varchar(50)) create table b(    id ...

  2. day 31 表单标签，CSS

    一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签 作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...

  3. linux命令学习之：tar

    tar命令可以为linux的文件和目录创建档案.利用tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现在,用户可以在 ...

  4. 4-java 格式化输出

    java保留两位小数4种方法 import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...

  5. java类中根据已有的变量复写类的toString方法

    java类中根据已有的变量复写类的toString方法: 在该类中定义好变量之后,shift+alt+s,从出现的列表中点击gemerate toString,就会自动生成对应的toString方法.

  6. widget jquery 理解

    jquery ui 的所有组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,实用它能实现一致的API,创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  7. nested exception is java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator

    该问题是少了一个spring-tx-的jar包,把该包加入到buildpath中就行了. 参考链接:http://blog.csdn.net/Rongbo_J/article/details/4666 ...

  8. 第一个ASP.NET Web API (C#)程序

    本文翻自http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api 绝对手工制作,如有雷同,实属巧合. 转载请注明. ...

  9. P1083龙舟比赛

    题目如下: 现在正在举行龙舟比赛,我们现在获得了最后冲刺时的俯视图像,现在你要输出各条龙舟的名次. 这张图像由r行c列的字符组成,每行的最左边的字符表示起点,所以字符为'S',最右边的字符为'F'.并 ...

  10. wifi功能模块

    1. API 10 Android2.3.3 不支持wifi代理设置. 2017-09-29 原来addOrUpdateNetwork之前,wifi配置并不会立即生效,要想立即生效,就要 wifiMa ...