前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Web前端学习 第3章 JavaScript基础教程17 计时器方

Web前端学习 第3章 JavaScript基础教程17 计时器方

原创
作者头像
学习猿地
修改2020-06-17 17:39:03
1.5K0
修改2020-06-17 17:39:03
举报
文章被收录于专栏:学习猿地

一、计时器方法概述

计时器方法可以实现在指定的时间过后,单次或重复调用函数的功能,setTimeout可以实现函数在指定毫秒数后单次执行,setInterval可以实现函数在指定毫秒数后重复执行,语法如下所示:

代码语言:javascript
复制
1 setTimeout(function(){
2     //一秒后执行
3 },1000);
4 
5 setInterval(function(){
6     //一秒后执行,并且每隔一秒重复执行
7 },1000)

二、setTimeout

下面我们来实现一个效果,页面加载3秒后在控制台输出hello world

代码语言:javascript
复制
1 setTimeout(function(){
2     console.log("hello world");
3 },3000)

当计时器开始计时后,我们可以使用clearTimeout方法让计时器停下来,下面我们来定义一个按钮,当页面加载后,如果我们在3秒钟之内点击按钮,计时器会停止,不会输出hello world,如果不点击按钮,3秒钟之后就会输出hello world

代码语言:javascript
复制
1 var btn = document.querySelector("button");
2 var t = setTimeout(function(){
3     console.log("hello world");
4 },3000)
5 btn.onclick = function(){
6     clearTimeout(t);
7 }

setTimeout方法会返回一个整数类型的值,通过这个值,我们可以停止计时器,我们将setTimeout方法的返回值赋值给一个变量,当点击按钮的时候,使用clearTimeout方法,传入t,这样计时器就会停止,hello world就不会在控制台输出。

三、setInterval

setInterval的用法与setTimeout的用法非常类似,都是传入两个参数,第一个参数是计时器执行的函数,第二个参数是毫秒数。下面我们来实现一个效果,每3秒钟在控制台输出依次hello world

代码语言:javascript
复制
1 setInterval(function(){
2     console.log("hello world");
3 },3000)

从代码可以看出,setInterval与setTimeout完全相同,区别在于setInterval参数中的函数没个指定毫秒数后都会重复执行,当我们不希望计时器重复执行的时候,就可以使用clearInterval方法来停止计时器

代码语言:javascript
复制
1 var btn = document.querySelector("button");
2 var t = setInterval(function(){
3     console.log("hello world");
4 },3000)
5 btn.onclick = function(){
6     clearInterval(t);
7 }

下面我们来实现一个效果,让控制台输出每隔1秒按顺序输出正整数,从数字1开始输出

代码语言:javascript
复制
1 var n = 1;
2 function showNumber(){
3     console.log(n);
4     n++;
5 }
6 setInterval(showNumber,1000);
7 showNumber();    //调用函数,可以在页面加载时直接输出1。

上面的代码与之前有一点区别,我们并没有直接给setInterval传递一个匿名函数,而是先定义了一个函数showNumber,然后将showNumber传递给setInterval,这两种写法效果是一样的,但是如果将匿名函数传入setInterval,这个函数将不能被调用。

在上面代码的结尾,我们在页面加载之后调用了一次showNumber,目的是为了让页面加载的时候就输出1,否则我们将要等待一秒之后才能看到控制台输出1。

这个案例会一直输出数字,下面我们来改进这个例子,当数字为10的时候就停止,效果看起来有些想之前讲过的for循环输出数字,但用计时器输出可以实现每个1秒输出一个数字,而不是连续的输出

代码语言:javascript
复制
 1 var n = 1,t=0;
 2 function showNumber(){
 3     console.log(n);
 4     if(n === 10){
 5         clearInterval(t);
 6     }
 7     n++;
 8 }
 9 t=setInterval(showNumber,1000);
10 showNumber(); 

我们通过一个if语句判断n的值,当n到达10的时候,就停止计时器,这样计时器就不会再继续输出数字了。

我们还可以继续用按钮控制计时器,这次我们定义一个h1标签存放数字,再用两个按钮来实现“开始计数”和“停止计数”功能

代码语言:javascript
复制
 1     <h1>0</h1>
 2     <button id="start">开始计数</button>
 3     <button id="stop">停止计数</button>
 4     <script>
 5         var btnStart = document.querySelector("#start");
 6         var btnStop = document.querySelector("#stop");
 7         var h1 = document.querySelector("h1");
 8         var t;
 9         btnStart.onclick = function(){
10             clearInterval(t);                       //防止连续点击开始计时,导致创建多个计时器
11             t = setInterval(function(){
12                 var number = Number(h1.innerHTML);  //将h1的文本节点转换成数字
13                 number++;
14                 h1.innerHTML = number;
15             },300); 
16         }
17 
18         btnStop.onclick = function(){
19             clearInterval(t);
20         }
21     </script>

在网页中我们经常会看到指定秒数跳转到其他网页,我们可以用计时器方法来实现这个功能

代码语言:javascript
复制
 1 <p><span class="seconds">5</span>秒后跳转到百度</p>
 2 <script>
 3     var seconds = document.querySelector(".seconds");
 4     setInterval(function(){
 5         var s = Number(seconds.innerHTML);
 6         s--;
 7         seconds.innerHTML = s;
 8         if(s === 0){
 9             location.href = "http://baidu.com";  //location.href可以实现页面跳转
10         }
11     },1000)
12 </script>

课后练习

制作一个倒计时的功能,要求如下:

  1. 计算距离指定日期还有多少天,多少小时,多少分钟,多少秒;
  2. 在网页上动态输出这个时间;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、计时器方法概述
  • 二、setTimeout
  • 三、setInterval
  • 课后练习
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档