10.js计时器

最新推荐文章于 2024-08-15 15:16:01 发布

前端新手W

最新推荐文章于 2024-08-15 15:16:01 发布

阅读量201

点赞数

分类专栏： # 前端-JavaScript 文章标签： javaScript 计时器 html5

本文链接：https://blog.csdn.net/weixin_43167546/article/details/102818911

版权

前端-JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

计时器

一.计时器

1.javaScript一个设定的时间间隔之后来执行代码而不是在函数被调用后立即执行,我们称之为计时事件.
2.时间为毫秒.1000毫秒=1秒

二.计时器开启方法:

setInterval(参数1,参数2) 参数1为函数,参数2为时间.可以直接运行,也可以赋给一个变量之后运行.

计时器只运行一次,如果想多用几个要复制粘贴.

(1)常用计时器:setInterval

1.使用匿名函数,函数由计时器调用执行

var num = 1;
setInterval(function(){
    num++;
    console.log(num);
},1000);

2.正常函数的写法

function action1(){
    console.log("张三");
}
//不要写()
var timer1 = setInterval(action1,1000);

3.方法3:

setInerval("action()",500);

(2)方法4:setTimeout

延时计时器,循环一定时间后停止

setTimeout(function(){
    clearInterval(timer1);
},5000);//5秒后停止,上边循环5次

三.计时器解除方法

1.setInterval()的解除方法

clearInterval(timer1);//括号里边是计时器所赋的名字.

2.setTimeout()的解除方法

clearTimeout();

四.倒计时练习

<!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">
  <title>倒计时</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .hour,
    .minute,
    .second {
      width: 30px;
      height: 30px;
      background-color: #000;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      display: inline-block;

    }

    .hour {
      margin-left: 20px;
    }

    .div {
      float: left;
      margin: 20px 0;
    }

    span {
      color: #000;
      font-size: 16px;
      margin: 0 20px;
    }
  </style>
</head>

<body>
  <!-- 时 -->
  <div class="div">
    <div class="hour">01</div>
    <span>:</span>
  </div>
  <!-- 分 -->
  <div class="div">
    <div class="minute">10</div>
    <span>:</span>
  </div>
  <!-- 秒 -->
  <div class="div">
    <div class="second">10</div>
  </div>



  <script>
    var hour = document.getElementsByClassName("hour")[0];
    var minute = document.getElementsByClassName("minute")[0];
    var second = document.getElementsByClassName("second")[0];
    var timeNumber = setInterval(function () {
        second.innerHTML -= 1;
        if (second.innerHTML <= 10 && second.innerHTML >= 0) {
          second.innerHTML = "0" + second.innerHTML;
        }
        //在秒数到0时分针没有变,下一秒才变
        if (second.innerHTML == -1) {
          second.innerHTML = 59;
          minute.innerHTML -= 1;
          if (minute.innerHTML < 10 && minute.innerHTML >= 0) {
            minute.innerHTML = "0" + minute.innerHTML;
          }
          if (minute.innerHTML == -1) {
            minute.innerHTML = 59;
            hour.innerHTML -= 1;
            if (hour.innerHTML < 10 && hour.innerHTML >= 0) {
              hour.innerHTML = "0" + hour.innerHTML;
            }
            if (hour.innerHTML == -1) {
              hour.innerHTML = "00";
              second.innerHTML = "00";
              minute.innerHTML = "00";
              clearInterval(timeNumber);
            }
          }
        }
      },
      10);
  </script>
</body>
</html>

效果
在这里插入图片描述

前端新手W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.js计时器

计时器一.计时器1.javaScript一个设定的时间间隔之后来执行代码而不是在函数被调用后立即执行,我们称之为计时事件.2.时间为毫秒.1000毫秒=1秒二.计时器开启方法:setInterval(参数1,参数2) 参数1为函数,参数2为时间.可以直接运行,也可以赋给一个变量之后运行.计时器只运行一次,如果想多用几个要复制粘贴.(1)常用计时器:setInterval1.使用匿名...
复制链接

扫一扫

专栏目录