how2j.cn

关键字 简介 示例代码
setTimeout
只执行一次
示例代码
setInterval
不停地重复执行
示例代码
clearInterval
终止重复执行
示例代码
document.write()
不要在setInterval调用的函数中使用document.write();
示例代码
示例 1 : 只执行一次   
示例 2 : 不停地重复执行   
示例 3 : 终止重复执行   
示例 4 : 不要在setInterval调用的函数中使用document.write();   

示例 1 :

只执行一次

函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname
本例在3秒钟后,打印当前时间。
解释:
document.getElementById 获取id=time的div元素
.innerHTML 修改该元素的内容
更多的关于如何获取元素,请参考 HTML DOM 获取元素
运行效果
<script> function printTime(){ var d = new Date(); var h= d.getHours(); var m= d.getMinutes(); var s= d.getSeconds(); document.getElementById("time").innerHTML= h+":"+m+":"+s; } function showTimeIn3Seconds(){ setTimeout(printTime,3000); } </script> <div id="time"></div> <button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>
<script>
 
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
 
}

function showTimeIn3Seconds(){
   setTimeout(printTime,3000);  
}
 
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

不停地重复执行

函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定
运行效果
<p>每隔1秒钟,打印当前时间</p> <div id="time"></div> <script> function printTime(){ var d = new Date(); var h= d.getHours(); var m= d.getMinutes(); var s= d.getSeconds(); document.getElementById("time").innerHTML= h+":"+m+":"+s; } var t = setInterval(printTime,1000); </script> <br><br>
<p>每隔1秒钟,打印当前时间</p>
  
<div id="time"></div>
  
<script>
  
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  
}
  
var t = setInterval(printTime,1000);
  
</script>

<br><br>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

终止重复执行

通过clearInterval终止一个不断重复的任务
本例,当秒是5的倍数的时候,就停止执行
运行效果
<p>每隔1秒钟,打印当前时间</p> <div id="time"></div> <script> var t = setInterval(printTime,1000); function printTime(){ var d = new Date(); var h= d.getHours(); var m= d.getMinutes(); var s= d.getSeconds(); document.getElementById("time").innerHTML= h+":"+m+":"+s; if(s%5==0) clearInterval(t); } </script> <br>
<p>每隔1秒钟,打印当前时间</p>
  
<div id="time"></div>
  
<script>
  
var t = setInterval(printTime,1000);

function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);
}
  
</script>
<br>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

不要在setInterval调用的函数中使用document.write();

注:部分浏览器,比如firefox有这个问题,其他浏览器没这个问题。

假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。
运行效果
<p>每隔1秒钟,通过document.write打印当前时间</p> <script> function printTime(){ var d = new Date(); document.write(d.getHours()); document.write(":"); document.write(d.getMinutes()); document.write(":"); document.write(d.getSeconds()); document.close(); } var t = setInterval(printTime,1000); </script>
<p>每隔1秒钟,通过document.write打印当前时间</p>

<script>

function printTime(){
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.close();
}

var t = setInterval(printTime,1000);

</script>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-03-15 if(s%5==0)这段代码中S%5==0到底是什么意思呢
哥哥好胤哦
S%5==0到底是什么意思啊




2 个答案

哥哥好胤哦 答案时间:2018-03-21
噢,没反应过来,谢谢啦

insanity2017 答案时间:2018-03-20
S能被5整除




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-12-12 为什么这个<script></script>标签只能放在下面才能运行呢?
asd无间



经过测试,如果把script标签放在上面的话 <script type="text/javascript"> function printTime() { var date = new Date(); var h=date.getHours(); var m=date.getMinutes(); var s = date.getSeconds(); document.getElementById("time").innerHTML = h+":"+m+":"+s; } var t =setInterval(printTime); </script> <div id="time"></div> 比如这样,就会报找不到time元素这个错误,请问放在上面是什么原因导致通过getElementById无法找到time这个元素的?
<p>每隔1秒钟,打印当前时间</p>
   
<div id="time"></div>
   
<script>
   
var t = setInterval(printTime,1000);
 
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);
}
   
</script>
<br>

							


3 个答案

A756209640 答案时间:2018-04-02
你这里改成浏览器加载后再载入这个函数就好了 <script type="text/javascript"> window.onload=function printTime() { var date = new Date(); var h=date.getHours(); var m=date.getMinutes(); var s = date.getSeconds(); document.getElementById("time").innerHTML = h+":"+m+":"+s; } var t =setInterval(printTime,1000); </script>

猎手 答案时间:2018-02-12
哥们,你这个 var t =setInterval(printTime);差一个参数吧。 是不是应该:var t =setInterval(printTime,1000);

ikonon 答案时间:2017-12-16
因为getElementById("time")是调用前面的<div id="time"></div>的啊,代码是按顺序执行的。 从效率来说<script>标签放后面也比较好。




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-09-27 关于函数加不加括号的问题
2017-09-24 显示不出时间
2017-01-19 document.getElementById("time").innerHTML




提问之前请登陆
关于 前端基础-JavaScript-计时器 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图