JavaScript定时器作业

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>定时器练习</title>
  6. </head>
  7. <body>
  8. <input id="i1" type="text">
  9. <input id="start" type="button" value="开始">
  10. <input id="stop" type="button" value="停止">
  11. <script>
  12.  
  13.     // 声明一个全局的t,保存定时器的ID
  14.     var t;
  15.     // 在input框里显示当前时间
  16.     // 1. 获取当前时间
  17.     function foo() {
  18.         var now = new Date();//获取时间
  19.         var nowStr = now.toLocaleString();
  20.         // 2. 把时间字符串填到input框里
  21.         var i1Ele = document.getElementById("i1");
  22.         i1Ele.value = nowStr; //将值传到该位置，将在页面i1上显示
  23.     }
  24.  
  25.     // 点开始让时间动起来
  26.     // 找到开始按钮,给它绑定事件
  27.     var startButton = document.getElementById("start");  //取id
  28.     startButton.onclick=function () {
  29.         foo();//先执行，就不会有停滞
  30.         // 每隔一秒钟执行foo
  31.         if (t===undefined){ //能保证只有一个定时器，如果t不是undefined说明已经有定时器了，还没有清除
  32.             t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t
  33.         }
  34.     };
  35.     // 点停止
  36.     // 找到停止按钮,给它绑定事件
  37.     var stopButton = document.getElementById("stop");
  38.     stopButton.onclick=function () {
  39.         // 清除之前设置的定时器
  40.         clearInterval(t); // 清除t对应的那个定时器, t的值还在， 清除！清除！
  41.         console.log(t);
  42.         t = undefined; //重置，可以下次在设置定时器
  43.     }
  44.  
  45. </script>
  46. </body>
  47. </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. oracle使用 merge 更新或插入数据

    OracleCC++C#  总结下.使用merge比传统的先判断再选择插入或更新快很多. 1)主要功能 提供有条件地更新和插入数据到数据库表中 如果该行存在,执行一个UPDATE操作,如果是一个新行, ...

  2. c++之boost share_ptr

    转载:https://www.cnblogs.com/welkinwalker/archive/2011/10/20/2218804.html

  3. OSGi 系列（一）之什么是 OSGi ：Java 语言的动态模块系统

    OSGi 系列(一)之什么是 OSGi :Java 语言的动态模块系统 OSGi 的核心:模块化.动态.基于 OSGi 就可以模块化的开发 java 应用,模块化的部署 java 应用,还可以动态管理 ...

  4. asp.net状态保持

    1.首先如果不是asp.net webform而只是一个纯粹的html页面和ashx一般处理程序的话,因为http协议的无状态,每一次的页面请求都会重新实例化一个页面对象(注意实例化页面对象其实是通过 ...

  5. msys2 显示git branch

    在.bashrc或.bash_profile中添加以下内容 function parse_git_branch () { git branch 2> /dev/null | sed -e '/^ ...

  6. 2018.08.06 bzoj1503: [NOI2004]郁闷的出纳员（非旋treap）

    传送门 平衡树简单题. 直接用fhgtreap实现分裂和合并就没了. 代码: #include<bits/stdc++.h> #define N 100005 using namespac ...

  7. C++之类和对象的使用（三）

    对象数组 如果构造函数只有一个参数,在定义数组时可以直接在等号后面的花括号内提供.Student stud[3]={90,92,01};//合法 如果构造函数有多个参数,则不能用在定义时直接所提供所有 ...

  8. 日历时间选择控件---3(支持ie、火狐)

    效果展示:  源代码: <script language=javascript ><!--/* 调用方法:不能用onfocus,要用onclick  <input onclic ...

  9. 如何将word中的图片和文字导入自己的博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  10. （动态规划 最长有序子序列）Monkey and Banana --HDU --1069

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1069 http://acm.hust.edu.cn/vjudge/contest/view.action ...