计时器

语法：

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. selinux下修改sshd端口号

    21 如果已开selinux,修改sshd配置文件  # vim /etc/ssh/sshd_config中的端口号后 重启SSH服务  # systemctl restart sshd.servic ...

  2. 分布式数据库sort那些事儿

    待填. 收回之前的填坑时间. 计划永远没有变化快,所有周末都奉献上还是有干不完的活,待闲时再来填..

  3. razor表单验证

    1.验证注解(Model) public class Student { //默认不能为空 [Required(ErrorMessage ="姓名不能为空")] [StringLe ...

  4. 2.C#中的常用快捷键

    快速对齐代码: Ctrl+K+D:  快速对齐代码   (如果代码语法错误,就不能使用) Ctrl+Z:  撤销 Ctrl+S:保存   没事就Ctrl+S一下,防止因为电脑断电,代码全部丢失 Ctr ...

  5. JDK基本知识

    JDK发展史: JDK1.0:提供了一个纯解释的Java虚拟机实现 JDK1.3:把Java技术体系拆分为3个方向,J2SE,J2EE,J2ME,并且Java虚拟机第一次内置了JIT JDK1.4:增 ...

  6. 阿里前端笔试总结--H5面试题

    转载网址 https://blog.csdn.net/qq_20913021/article/details/51351801 1.有一个长度未知的数组a,如果它的长度为0就把数字1添加到数组里面,否 ...

  7. 从零开始的全栈工程师——js篇（闭包）

    闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会 ...

  8. Yesterday is history, tomorrow is a mystery, but today is a gift.

    Yesterday is history, tomorrow is a mystery, but today is a gift.昨天已成历史,明天太过神秘,而今天是一份礼物.

  9. ASP.NET MVC 音乐商店 - 1 创建项目

    我们的项目从在 Visual Studio 中的文件菜单中选择“新建”,选择“项目”开始. 然后,选择 C# 中的 Web 模板组,在右边的项目模板中选择 ASP.NET MVC3 Web 应用程序, ...

  10. [MedicalEndoscope]PFC介绍

    PFC的英文全称为“Power Factor Correction”,意思是“功率因数校正”,功率因数指的是有效功率与总耗电量(视在功率)之间的关系,也就是有效功率除以总耗电量(视在功率)的比值. 基 ...