计时器

语法：

setInterval(代码，交互时间)

参数说明：

  1. 代码：要调用的函数或要执行的代码串。

  2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

例子：



<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>定时器</title>

<script type="text/javascript">

  var attime;

  function clock(){

    var time=new Date();

    attime=  time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();;

    document.getElementById("clock").value = attime;

  }

  var timer = setInterval(clock,1000);

</script>

</head>

<body>

<form>

<input type="text" id="clock" size="50"  />

</form>

</body>

</html>

取消计时器

语法：

clearInterval(id_of_setInterval)

参数说明：

id_of_setInterval：由 setInterval() 返回的 ID 值。

任务：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

   function clock(){

      var time=new Date();

      document.getElementById("clock").value = time;

   }

    var i=setInterval("clock()",100);

</script>

</head>

<body>

  <form>

    <input type="text" id="clock" size="50"  />

    <input type="button" value="Stop" onclick="clearInterval(i)"  />

  </form>

</body>

</html>

延时计时器 setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法：

setTimeout(代码,延迟时间);

例子：



<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function tinfo(){

  var t=setTimeout("alert('Hello!')",5000);

 }

</script>

</head>

<body>

<form>

  <input type="button" value="start" onClick="tinfo()">

</form>

</body>

</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。



<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

var num=0;

function numCount(){

 document.getElementById('txt').value=num;

 num=num+1;

 setTimeout("numCount()",1000);

 }

</script>

</head>

<body>

<form>

<input type="text" id="txt" />

<input type="button" value="Start" onClick="numCount()" />

</form>

</body>

</html>

取消计时器clearTimeout()

语法：

clearTimeout(id_of_setTimeout)

参数说明：

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

列子

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

  var num=0,i;

  function timedCount(){

    document.getElementById('txt').value=num;

    num=num+1;

    i=setTimeout(timedCount,1000);

  }

    setTimeout(timedCount,1000);

  function stopCount(){

    clearTimeout(i);

  }

</script>

</head>

<body>

  <form>

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

    <input type="button" value="Stop" onClick="stopCount()">

  </form>

</body>

</html>

javascript入门笔记7-计时器的更多相关文章

  1. JavaScript基础——JavaScript入门(笔记)

    JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...

  2. JavaScript入门笔记

    第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...

  3. javascript入门笔记3-dom

    1.通过ID获取元素 document.getElementById("id") <!DOCTYPE HTML> <html> <head> & ...

  4. JAVAscript学习笔记 js计时器与倒计时 第六节 （原创） 参考js使用表

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

  5. JavaScript 入门笔记

    JavaScript   1.JS和DOM的关系 浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象 浏览器内部有一个JS的解释器/执行/引擎,如chrome用v8 ...

  6. JavaScript入门笔记（一）

    JavaScipt 2.1 javascript的组成部分 ECMAScript: 它是整个 javascript 的核心,包含(基本语法.变量.关键字.保留字.数据类型.语句.函数等等)DOM:文档 ...

  7. javascript入门笔记9-认识DOM

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...

  8. javascript入门笔记8-window对象

    History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...

  9. javascript入门笔记6-内置对象

    1.Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date() ...

随机推荐

  1. C++常用数据结构（对照python）

    python: c++17: get set extend/update find index size loop list std::vector v[0]; v.emplace_back(&quo ...

  2. set学习(系统的学习)

    set是STL中一种标准关联容器.它底层使用平衡的搜索树——红黑树实现,插入删除操作时仅仅需要指针操作节点即可完成,不涉及到内存移动和拷贝,所以效率比较高.set,顾名思义是“集合”的意思,在set中 ...

  3. ubuntu下安装wireshark(以及配置非root)

    https://jingyan.baidu.com/article/c74d60009d992f0f6a595de6.html Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网 ...

  4. poj1092. To Buy or Not to Buy (20)

    1092. To Buy or Not to Buy (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...

  5. JEECMS站群管理系统-- Jeecms项目导入myeclipse

    1.在myeclipse中新建一个项目jeecms,将服务器中jeecms项目下web-inf文件夹下内容拷到新建项目中 解压缩jeecms-3.0.2-final-src,在src文件夹下会看到有三 ...

  6. Hadoop学习笔记(3) Hadoop文件系统二

    1 查询文件系统 (1) 文件元数据:FileStatus,该类封装了文件系统中文件和目录的元数据,包括文件长度.块大小.备份.修改时间.所有者以及版权信息.FileSystem的getFileSta ...

  7. SQL DATEDIFF语法及时间函数 Sql 查询当天、本周、本月记录

    SQL DATEDIFF语法及时间函数 Sql 查询当天.本周.本月记录 转:http://blog.csdn.net/Json1204/article/details/7863801?locatio ...

  8. 对fastdfs 文件清单进行检查，打印无效的文件

    对fastdfs 文件清单进行检查,打印无效的文件2017年12月12日 18:37:18 守望dfdfdf 阅读数:281 标签: fastdfssftpmysql 更多个人分类: 工作 问题编辑版 ...

  9. 微信小程序电商实战-首页（上）

    嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图. ...

  10. Debug get/set property

    1. Select "Debug -> Windows -> Breakpoints" from VS menu. 2. Click "New -> B ...