|
|
|
示例 2 : 不停地重复执行 示例 3 : 终止重复执行 示例 4 : 不要在setInterval调用的函数中使用document.write();
函数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>
函数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>
通过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>
注：部分浏览器，比如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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-06-09
在setInterval里面使用document.write之后只能看到一次执行结果，是因为有document.close的缘故吧。。
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-05-09
设置间隔更简洁的做法
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-02-07
第一句没了
2019-09-07
这样写简洁点
2019-06-16
示例4测试
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|