javascript入门笔记7-计时器

计时器

语法

setInterval(代码,交互时间)

参数说明:

代码:要调用的函数或要执行的代码串。

交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(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>  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏禁心尽力

反射+自定义注解---实现Excel数据列属性和JavaBean属性的自动映射

简单粗暴,直奔主题。 需求:通过自定义注解和反射技术,将Excel文件中的数据自动映射到pojo类中,最终返回一个List<pojo>集合?   今天我只是通...

2149
来自专栏Pythonista

Golang之http编程

763
来自专栏刘晓杰

Glide中request的调用和管理

3367
来自专栏电光石火

C#解析JSON

使用开源的类库Newtonsoft.Json(下载地址http://json.codeplex.com/)。下载后添加dll引用就能用。 首先添加引用:usin...

2019
来自专栏电光石火

C#解析JSON

使用开源的类库Newtonsoft.Json(下载地址http://json.codeplex.com/)。下载后添加dll引用就能用。 首先添加引用:us...

1905
来自专栏程序你好

如何使用Java Stream Collectors(归约器)?

Java 8引入了Stream API,它允许我们以声明的方式处理数据。此外,Stream还可以在不需要编写多线程代码的情况下使用多核架构。

541
来自专栏Jack-Cui

232.Implement Queue using Stacks(Stack-Easy)

Implement the following operations of a queue using stacks. push(x) – Push eleme...

2015
来自专栏xdecode

Netty之粘包分包

粘包现象 客户端在一个for循环内连续发送1000个hello给Netty服务器端,   1 Socket socket = new Socke...

2166
来自专栏Android 开发者

[译] 使用 leanback 的 DiffCallback: 和 DiffUtil 回调之间的区别

1374
来自专栏更流畅、简洁的软件开发方式

基类、接口的应用——表单控件:一次添加、修改一条记录,一次修改多条记录。(上)

好久没发帖子了,又加了不少的功能呀。(图片仅是测试,不代表什么表情。) 本来我也想写一个2007的总结的,但是看到很多人都写了,我就不凑热闹了,写点和代码有关...

1725

扫码关注云+社区