专栏首页史上最简单的Spring Cloud教程javascript入门笔记7-计时器

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 条评论
登录 后参与评论

相关文章

  • 聊聊 SpringCloud 中的父子容器

    在引入 SpringCloud 的项目中会多次创建 Spring 容器,本篇从源码角度深入分析具体哪些点会创建 Spring 容器,以及这些容器之间的区别与联系...

    方志朋
  • 深入理解Hystrix之文档翻译

    什么是Hystrix 在分布式系统中,服务与服务之间依赖错综复杂,一种不可避免的情况就是某些服务将会出现失败。Hystrix是一个库,它提供了服务与服务之间的容...

    方志朋
  • spring cloud gateway之filter篇

    在上一篇文章详细的介绍了Gateway的Predict,Predict决定了请求由哪一个路由处理,在路由处理之前,需要经过“pre”类型的过滤器处理,处理返回响...

    方志朋
  • Linux内核深入研究之进程的线性地址空间-传统版

      了解Linux环境下,进程的地址空间划分,对于我们理解Linux应用程序有很大的帮助,否则会被New与Malloc之类的指针操作弄的晕头转向,本文基于Lin...

    数据饕餮
  • 经典笔试题-JSP如何获取HTML FORM中的数据

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • useContext更佳实践

    这么说的人可能忽视了state(状态)—— 不同于组件是以树的形式组合,我们经常会在不同层级的组件间公用同一个state。

    公众号@魔术师卡颂
  • Oracle系统表整理+常用SQL语句收集

    -- DBA/ALL/USER/V_$/GV_$/SESSION/INDEX开头的绝大部分都是视图 -- DBA_TABLES意为DBA拥有的或可以访问的所有...

    用户1221057
  • 经典SQL语句大全之数据开发

    1.按姓氏笔画排序: Select * From TableName Order By CustomerName Collate Chinese_PRC_Str...

    陈珙
  • Design Pattern: Observer Pattern

    1. Brief                               一直对Observer Pattern和Pub/Sub Pattern有所混淆,下...

    ^_^肥仔John
  • linq 学习笔记之 Linq基本子句

    var value=from v in values where v.indexof("it")>-1 select v

    DougWang

扫码关注云+社区

领取腾讯云代金券