JavaScript定时器作业

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>定时器练习</title>

</head>

<body>

<input id="i1" type="text">

<input id="start" type="button" value="开始">

<input id="stop" type="button" value="停止">

<script>

    // 声明一个全局的t,保存定时器的ID

    var t;

    // 在input框里显示当前时间

    // 1. 获取当前时间

    function foo() {

        var now = new Date();//获取时间

        var nowStr = now.toLocaleString();

        // 2. 把时间字符串填到input框里

        var i1Ele = document.getElementById("i1");

        i1Ele.value = nowStr; //将值传到该位置，将在页面i1上显示

    }

    // 点开始让时间动起来

    // 找到开始按钮,给它绑定事件

    var startButton = document.getElementById("start");  //取id

    startButton.onclick=function () {

        foo();//先执行，就不会有停滞

        // 每隔一秒钟执行foo

        if (t===undefined){ //能保证只有一个定时器，如果t不是undefined说明已经有定时器了，还没有清除

            t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t

        }

    };

    // 点停止

    // 找到停止按钮,给它绑定事件

    var stopButton = document.getElementById("stop");

    stopButton.onclick=function () {

        // 清除之前设置的定时器

        clearInterval(t); // 清除t对应的那个定时器, t的值还在， 清除！清除！

        console.log(t);

        t = undefined; //重置，可以下次在设置定时器

    }

</script>

</body>

</html>

效果：

JavaScript定时器作业的更多相关文章

  1. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  2. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  3. JavaScript定时器详解

    假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...

  4. Javascript 定时器调用传递参数的方法

    文章来源:  https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...

  5. JavaScript定时器的工作原理（翻译）

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  6. 关于JavaScript定时器我的一些小理解

    因为自己在平时工作中,有些功能需要用到定时器,但是定时器并不像我们表边上看到的那样,所以这周末我看看书查查资料,深入研究了一下JavaScript中的定时器,那么废话不多说,下面进入我们今天的正题. ...

  7. Javascript 定时器的使用陷阱 (setInterval)

    setTimeout(function(){ // 其他代码 setTimeout(arguments.callee, interval); }, interval); setInterval会产生回 ...

  8. JavaScript定时器越走越快的问题

    目录 JavaScript定时器越走越快的问题 (setinterval)多次初始化 清除(clearInterval)的失效 解决方法 JavaScript定时器越走越快的问题 之前在项目中写了定时 ...

  9. JavaScript定时器及回调用法

    JavaScript定时器及回调用法 循环定时任务 // 假设现在有这样一个需求:我需要请求一个接口,根据返回结果判断需不需要重复请求,直到达到某一条件为止,停止请求执行某操作 <script ...

随机推荐

  1. 对FPKM/RPKM以及TPM的理解

    对FPKM/RPKM以及TPM的理解 2018年07月03日 16:05:53 sixu_9days 阅读数:559 标签: FPKM/RPKMTPMRNA-Seq 更多 个人分类: RNA-Seq ...

  2. python不用声明数据类型

    不用声明变量一样,Python不用去声明函数的返回类型,是由于其“若类型”的语言特性决定的. 在其他语言中,例如C/C++语言中在存储一个数据之前,都需要在内存中给这个数据开辟一个固定的内存空间,并给 ...

  3. [SoapUI] How to create a random UUID in each Request's Headers

    ${=java.util.UUID.randomUUID()}  is OK

  4. cuda使用

    import torchx = torch.randn(2, 3)x = x.cuda() print (x)#最简单的cuda使用,但是感觉好慢啊

  5. java 事件监听

    事件监听实现: 三要素: 1.事件源(数据源,要处理的数据) 2.事件 (承载数据,传递信息并被监听) 3.监听器 (负责对数据的业务处理) --该开发用例采用了Spring的事件监听 1.  定义事 ...

  6. part1:4-linux快速体验

    1.Linux部分目录结构介绍 /:根目录,一般根目录下只存放目录,尽量不要存放文件:/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中. /bin:可执行二进制文件目录, ...

  7. 【Jsoup】Jsoup解析Html标签(Java后台解析)

    中文API网站(下载地址): http://www.open-open.com/jsoup/ 有时候编辑器传到后台的内容是带Html标签的,或者有时候需要形成一个完整的Html文档,也或者需要解析其中 ...

  8. 2018.10.12 NOIP训练 01 串（倍增+hash）

    传送门 一道挺不错的倍增. 其实就是处理出每个数连向的下一个数. 由于每个点只会出去一条边,所以倍增就可以了. 开始和zxyzxyzxy口胡了一波O(n+m)O(n+m)O(n+m)假算法,后来发现如 ...

  9. 【Unity】1.0 第1章 Unity—3D游戏开发和虚拟现实应用开发的首选

    分类:Unity.C#.VS2015 创建日期:2016-03-23 一.简介 Unity是跨平台2D.3D游戏和虚拟现实高级应用程序的专业开发引擎,是由Unity Technologies公司研制的 ...

  10. web前端技术合集

    视频课程包含: 微服务精品课程包含:Ajax和Jquery基础入门视频.ajax教程.css视频教程.JQuery视频教程.MUI快速混合APP开发-视频.vuejs教程.极客学院HTML5全套教程. ...