计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)

或

setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

  var int=setInterval(clock, 100)

  function clock(){

    var time=new Date();

    document.getElementById("clock").value = time;

  }

</script>

</head>

<body>

  <form>

    <input type="text" id="clock" size="50"  />

  </form>

</body>

</html>

任务

补充右边编辑器第10行，获取时间，格式"时:分:秒"，并赋值给attime。

补充右边编辑器第13行，使用setInterval()计时器来显示动态时间。

<!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();

	var hour = time.getHours();

	if(hour<10)

	{

		hour = "0"+hour;

	}

	var minu = time.getMinutes();

	if(minu<10)

	{

		minu = "0"+minu;

	}

	var sec = time.getSeconds();

	if(sec<10)

	{

		sec = "0"+sec;

	}

	attime = hour+":"+minu+":"+sec;

	document.getElementById("clock").value = attime;

}

attime = setInterval(clock,1000);

</script>

</head>

<body>

<form>

<input type="text" id="clock" size="50"  />

</form>

</body>

</html>

JS Window对象 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。的更多相关文章

  1. JS window对象 计时器setTimeout() setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 语法: setTimeout(代码,延迟时间);

    计时器setTimeout() setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次. 语法: setTimeout(代码,延迟时间); 参数说明: 1. 要调用的函数 ...

  2. JS window对象的top、parent、opener含义介绍 以及防止网页被嵌入框架的代码

    1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window ...

  3. js window对象

    BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象是(1)通过JavaScript访问浏览器窗口的一个接口 (2)ECMAScript规定的Global对象 1.全 ...

  4. 【repost】js window对象属性和方法相关资料整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  5. js window对象属相和方法相关整理资料

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  6. JS window对象 返回前一个浏览的页面 back()方法

    JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back();   返回前一个浏览的页面 back ...

  7. JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT

    取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...

  8. JS window对象详解

    window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象.一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一 ...

  9. JS window对象的top、parent、opener含义

    .top 该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. .opener opener用于在window.open的页面引用执行该window ...

随机推荐

  1. Codeforces 1111E DP + 树状数组 + LCA + dfs序

    题意:给你一颗树,有q次询问,每次询问给你若干个点,这些点可以最多分出m组,每组要满足两个条件:1:每组至少一个点,2:组内的点不能是组内其它点的祖先,问这样的分组能有多少个? 思路:https:// ...

  2. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  3. laravel多字段模糊匹配

    use App\Models\Resume; $resume = Resume::query(); $content = $request->input('content'); $resume ...

  4. Vue源码------------- 数据响应系统的基本思路

    在 Vue 中,我们可以使用 $watch 观测一个字段,当字段的值发生变化的时候执行指定的观察者,如下: var vm = new Vue({ data: { num:1 } }) vm.$watc ...

  5. lnmp mysql高负载优化

    mysql负载会造成cpu占用高的问题如果没启用innodb的话 用这个配置/usr/local/mysql/share/mysql/my-large.cnf 替换/etc/my.cnf 也可参考如下 ...

  6. OS: 生产者消费者问题(二) ---- 系统V IPC通信-信号量和共享内存

    在上一篇“OS: 生产者消费者问题(多进程+共享内存+信号量)”中提到的方法二: 如果进程之间并没有父子关系,但是协商好了共享存储的 KEY , 那么在每个进程中,就可以通过 KEY 以及 shmge ...

  7. RF中滚动条的操作方法小结

    滚动条分为俩种,一:主页面中的滚动条.二:页面中的子页面的滚动条. 每种滚动条有都分为上下滑动与左右滑动. 下面分别介绍: 一:主页面的滚动条上下滑动: execute javascript      ...

  8. elasticsearch中TermQuery查不到数据问题

    在java rest client中调用elasticsearch中的数据,精准匹配的termQuery查不到数据,这个问题是java rest client客户端自带的bug,换用matchPhra ...

  9. 替换war包中的文件

    原文:https://blog.csdn.net/wuawua1/article/details/53906700 1.如果要替换的文件直接在war包的根目录(一级目录)下,直接使用jar uvf命令 ...

  10. jQuery 加载事件

    1. jquery加载事件实现 ① $(document).ready(function处理); ② $().ready(function处理); ③ $(function处理);  对第一种加载的封 ...