计时器

语法：

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. Django 中orm的第一次举荐

    Django ORM :对象--关系--映射 创建Django准备工作: 1.在数据库创建你需要的数据库 2.在项目models里创建模型(就是python写的类,也可以说是python写的数据库) ...

  2. zepto.js常用操作

    zepto.js是移动端的jquery,但是并没有提供所有与jquery类似的api.Zepto设计的目的是有一个5-10k的通用库.下载并快速执行.有一个熟悉通用的API,所以你能把你主要的精力放到 ...

  3. php防止重复提交问题总结

    用户提交表单时可能因为网速的原因,或者网页被恶意刷新,致使同一条记录重复插入到数据库中,这是一个比较棘手的问题.我们可以从客户端和服务器端一起着手,设法避免同一表单的重复提交. 1．使用客户端脚本 提 ...

  4. 自定义input文件上传 file的提示文字及样式

    简单记录一下 效果图: 代码: <input class="aload" type='button' value='上传附件' onClick='javascript:$(& ...

  5. IDEA检出SVN项目

    https://blog.csdn.net/qq_27093465/article/details/74898489 https://jingyan.baidu.com/article/47a29f2 ...

  6. js数组Array方法

    1. indexOf indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. var fruits = ["Banana", "Orange& ...

  7. Mac 下显示隐藏文件或文件夹

    Mac 操作系统 隐藏显示文件 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:defaults write co ...

  8. zookeeper的几种使用场景

    1.数据的发布与订阅 通过发布与订阅实现配置的信息的统一管理,主要采用zk节点可以存储数据的特性,我们可以将一些配置信息存放到某一节点上,订阅这个节点的服务就可以动态的获取这个节点的数据.在应用启动的 ...

  9. myVision云服务商业数据分析解决方案

    类型: 定制服务 软件包: business intelligence internet retailing solution collateral 联系服务商 产品详情 解决方案 概要 2014年, ...

  10. Angular2、4入门基础知识（小的概念）

    1. 使用引用符来格式化HTML代码. @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', sty ...