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>  

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot

基于Springmvc+Mybatis+Spring+Freemarker的物理分页插件(超级简单)

984
来自专栏菩提树下的杨过

打印机设置(PrintDialog)、页面设置(PageSetupDialog) 及 RDLC报表如何选择指定打印机

如果一台电脑同时连接多个打印机,而且每个打印机使用的纸张大小各不相同(比如:票据打印钱用的小票专用张,办公打印机用的是A4标准纸),在处理打印类的需求时,如果不...

2347
来自专栏一个爱瞎折腾的程序猿

winform制作小工具的技巧

在使用winfrom制作一些工具的时候,一些基本设置都是去属性里面找来找去,一段时间就忘了,记录记录以备不时之需。

1223
来自专栏君赏技术博客

HQ移动20170317期周报

删除缓存:rm ~/Library/Caches/CocoaPods/search_index.json

973
来自专栏对角另一面

读Zepto源码之assets模块

assets 模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景,所以这部分的代码解释不会太多,为了说明这个问题,我翻译了...

2340
来自专栏木宛城主

SharePoint下用C#代码上传文档至文档库的子文件夹中

SharePoint的文档库非常方便,可以管理日常的文档,更强大的是可以创建文件夹来分类,通常在UI界面上是非常简单了,点击文件夹,Create a Fold...

1978
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 2 初识AngularJs(续)

前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。   本篇根据w3cschool.cc继续学习AngularJS剩余的内...

1828
来自专栏me的随笔

ASP.NET MVC5中的Model验证

Model验证是ASP.NET MVC中的重要部分,它主要用于判断输入的数据类型及值是否符合我们设定的规则,这篇文章就介绍下ASP.NET MVC中Model验...

732
来自专栏xingoo, 一个梦想做发明家的程序员

前端那点事儿——Tocify自动生成文档目录

今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置;窗口滑动也能自动更新目录的焦点。 效果 框架 原来使用的是一个开源的jquery-...

2076
来自专栏Android开发小工

完全自定义样式的一句话实现RecyclerView的单选多选

今天的主题是封装RecyclerView的单选多选,现在大家应该都是用的RecyclerView开发列表数据吧。

1005

扫码关注云+社区