【JavaScript】定时器

芒果Cake

已于 2023-01-01 16:12:35 修改

阅读量779

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-12-29 21:48:54 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/128488506

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章对象

- 定时器

定时器

1. 定时器分类

延迟定时器
- 语法 setTimeout(function(){}, 毫秒数)
- 作用隔一段时间之后执行
间隔定时器
- 语法 setInterval(function(){}, 毫秒数)
- 作用每隔一段时间执行一次

// 1. 延迟定时器
    setTimeout(function () {
      console.log("执行了。。。");
    }, 2000);

  // 2. 间隔定时器
    setInterval(function () {
      console.log("执行了...");
    }, 2000);

2. 定时器的返回值

返回值数字
作用用来关闭定时器

// 定时器的返回值
  var t1 = setTimeout(function () {
    console.log("执行了延迟定时器");
  }, 1000);


  var t2 = setInterval(function () {
    console.log("执行了间隔定时器");
  }, 1000);


  console.log(t1, "t1");
  console.log(t2, "t2");

3. 关闭定时器

语法

clearTimeout(定时器)
clearInterval(定时器)

<body>
  <button id="btn">关闭</button>
</body>
<script>

 // 关闭定时器
  var t1 = setTimeout(function () {
    console.log("执行了延迟定时器");
  }, 1000);

  var t2 = setInterval(function () {
    console.log("执行了间隔定时器");
  }, 1000);

  btn.onclick = function () {
    // 关闭定时器
    // clearTimeout(t1);
    // clearTimeout(t2);
    clearInterval(t1);
    clearInterval(t2);
  };

</script>

案例一：页面时钟

/* 要求：
   在页面上展示一个时钟 隔1s更新一次
   效果：
   xx年xx月xx日 星期x xx:xx:xx
 */

  // 封装一个函数， 数字是一位数的时候，前面补0
  function format(num) {
    return num > 10 ? num : "0" + num;
  }

  function dateStr() {
    var str = "";

    // 获取日期
    var date = new Date();
    // 解析 获取每一个部分
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    var week = date.getDay();

    var weekStr = "日一二三四五六";
    week = "星期" + weekStr[week];

    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();

    str = `${year}年${month}月${day}日 ${week}  ${format(h)}:${format(
      m
    )}:${format(s)}`;

    return str;
  }

  box.innerHTML = dateStr();

  setInterval(function () {
    box.innerHTML = dateStr();
  }, 1000);

案例二：倒计时

    /*
    设置未来时间  1.14 
    距离 1. 14还有  x日x时x分x秒
	分析：
    时间戳相减
    */
/* 

function countDay() {
  var str = "";

  var futureTime = new Date("2023/1/14");
  var currentTime = new Date();

  var time = parseInt((futureTime - currentTime) / 1000);

  var day = parseInt(time / (24 * 60 * 60));
  var h = parseInt((time % (24 * 60 * 60)) / (60 * 60));
  var m = parseInt((time % (60 * 60)) / 60);
  var s = time % 60;

  // str = `${day}天${h}时${m}分${s}秒`;
  str = day + "天" + h + "时" + m + "分" + s + "秒";
  return str;
}

box.innerHTML = countDay();

setInterval(function () {
  box.innerHTML = countDay();
}, 1000);

案例三：抽奖案例

<style>
  div {
    width: 500px;
    height: 100px;
    border: 5px solid red;
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
  }
  body {
    text-align: center;
  }
</style>
<body>
  <div id="box">开始抽奖</div>
  <button id="start">开始</button>
  <button id="end">结束</button>
</body>
<script>
var arr = [
"谢谢惠顾",
"再来一次",
"身体健康",
"试卷一套",
"想屁吃",
"彩票一张",
"沙县小吃",
"劳斯莱斯五元优惠券",
"别墅一套",
"袜子一双",
"霸王洗发水",
];

// 需求 点击 box开始抽奖 再次点击停止抽奖
// 开始抽奖 ---- 不断的从arr中随机产生一项，放到box中

// 1. 定时器
// 2. 生成一个随机数  0 ~ 9
// 3. 放到box box.innerHTML

// 生成随机数
function randNum(min, max) {
return Math.round(Math.random() * (max - min) + min);
}

var flag = false; // 当前抽奖的状态
var t = null; // 准备一个变量 ，接受定时器结果

box.onclick = function () {
if (!flag) {
// 开始抽奖
t = setInterval(function () {
// 生成一个0 ~ 9的随机数
var num = randNum(0, 9);
var text = arr[num];
box.innerHTML = text;
}, 200);
// 把抽奖的状态改成正在抽奖
flag = true;
} else {
// 停止抽奖 做的是什么事情
flag = false;
clearInterval(t);
}
};
  </script>

案例四：抽奖案例按钮版

<style>
      div {
        width: 500px;
        height: 100px;
        border: 5px solid red;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
      }
      body {
        text-align: center;
      }
</style>

  <body>
    <div id="box">开始抽奖</div>
    <button id="start">开始</button>
    <button id="end">结束</button>
  </body>
<script>
  var arr = [
    "谢谢惠顾",
    "再来一次",
    "身体健康",
    "试卷一套",
    "想屁吃",
    "彩票一张",
    "沙县小吃",
    "劳斯莱斯五元优惠券",
    "别墅一套",
    "袜子一双",
    "霸王洗发水",
  ];


  // 点击开始按钮 开始抽奖
  // 点击结束按钮 结束抽奖


  var t = null; // 用来接受 定时器的结果


  // 生成随机数
  function randNum(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }


  start.onclick = function () {
    // 根据t判断是否应该生成一个定时器


    if (t) {
      return;
    }
    t = setInterval(function () {
      // 生成一个0 ~ 9的随机数
      var num = randNum(0, 9);
      var text = arr[num];
      box.innerHTML = text;
    }, 200);
  };
  end.onclick = function () {
    clearInterval(t);
    t = null;
  };
</script>