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-10-23 为什么不止一次的一直打印时间啊
淅淅细雨



为什么不止一次的一直打印时间啊
<html>
<script>
function p(){
var time=new Date()
var a=time.getHours()
var b=time.getMinutes()
var c=time.getSeconds()
document.write(a+":"+b+":"+c)
}
var f=setInterval(p,1000)
</script>
</html>

							






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





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>标签只能放在下面才能运行呢?
2017-09-27 关于函数加不加括号的问题
2017-09-24 显示不出时间
2017-01-19 document.getElementById("time").innerHTML




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

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图