章节
问答
课签
笔记
评论
占位
占位

计时器setTimeout()

setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明:

1. 要调用的函数或要执行的代码串。
2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

当我们打开网页3秒后,在弹出一个提示框,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。

<!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>

 

 

 

 

任务

补充右边编辑器第12和14行,使用setTimeout()实现计数统计效果,并在文本框中显示数值。

 

?不会了怎么办

第12行,在函数内容使用setTimeout(),实现自身调用,创建一个循环计数器。

第14行,使用setTimeout(),在设定时间后执行startCount()函数。

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_慕田峪9512309
第一次实现自身调用,创建一个循环计数器第二次是在设定时间后执行startCount()函数

最赞回答 / 都是已存在
他在函数外用setTimeout是为了等下面的文本框加载后再调用函数,直接调用函数的话,下面文本框还没有加载,document.getElementById('count');//会获取不到id为“count”的标签。

最新回答 / weixin_慕斯卡0073094
里层控制的是递增的速度,外层的是你编译后多久开始执行那个函数

最赞回答 / 慕尼黑1441384
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>计时器</title><script type="text/javascript">  var num=0;  function startCount() {    document.getElementById('coun...

最赞回答 / 冰封一切1
其实你们都没有注意到document.getElementById('count')  是 null,这里是慕课网上代码有问题,解决的方法是把整个<script></script>代码放到下面(比如</body>前),因为没有在onload,或者document.ready里面,页面可能还没渲染好执行js,导致为null

最赞回答 / weixin_慕妹8291620
因为第一次执行函数之后又会通过setTimeout里面再执行这个函数,在执行这个函数里面又经过setTimeout执行这个函数,一直反复

最新回答 / qq_绿贝壳_0
我也遇到了,setTimeout把里面的函数名加上引号就可以解决了

最赞回答 / zlm_Daybreak
会报错的,执行到
startCount();
的时候,还没有加载 input 标签,getElementById 会报错。可以自己写一个本地 html 然后看下 console 的信息。

最赞回答 / 你又调皮
这个其实也很好理解的,点击开始按钮执行numCount()函数会立刻绑定一个计时器,计时器1秒后执行numCount()函数又会绑定一个计时器,也就是说1秒钟之后会有两个计时器,2秒钟是4个,每隔1秒计时器翻倍8,16,32...。每个计时器每隔1秒都会执行numCount()函数,同时也会使num值加1,num值也会越增越快,计时器有多少每次num值就增加多少,所以文本框中显示的就是1,1+2,1+2+4,1+2+4+8,1+2+4+8+16...

已采纳回答 / 阳火锅
<...图片...>把我框出来的那一大段移到  body标签下面来就可以了

最赞回答 / voiceee
setInterval也可以的放在函数内的,只需要注意函数的作用域就行,而且setTimeout跟setInterval差不多

最赞回答 / Salvatorewang
这个编译器的问题,VS code 实测并不会出问题  代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" />...
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言