[JavaScript timer small case] Several common timer implementation cases

Blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

There are quite a lot of timers used in daily development. Here are a few of the more common ones.

Case 1: Countdown to mobile phone verification code

Code

<!DOCTYPE html>
<html>
<body>

    <input type="button" value="获取验证码" onclick="settime(this)" />
  
  <script>
    // 发送验证码
        var countdown = 60;
        function settime(obj) {
       if (countdown === 0) {
          obj.removeAttribute("disabled");
          obj.value="获取验证码";
          countdown = 60;
          return;
       } else {
          obj.setAttribute("disabled", true);
          obj.value = "重新发送(" + countdown + ")";
          countdown--;
       }
       setTimeout(function() {
          settime(obj)
       },1000)
    }
  </script>
</body>
</html>

Effect

Code analysis

Use setTimeout to simulate the effect of the countdown, which has a small error, but it can be within an acceptable range.

Case 2: Calendar clock

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易时钟</title>
    <style>
        .time{
          width: 300px;
          height: 60px;
          margin:0px auto;
          line-height: 60px;
          text-align: center;
          color: red;
          background-color: yellow;
      }
    </style>
</head>
<body>
    <div id="time" class="time"></div>
</body>
<script>
    setInterval(function(){
        var d = new Date();
        var time = document.getElementById('time');
        //获取当前区域时间并转成字符串
        time.innerHTML = d.toLocaleString();
    },1000);
</script>
</html>

Effect

Code analysis

Use setInterval to get the current time every 1 second

Case 3: Lottery

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
</head>
<body>
    <input type="button" value="开始" onclick="start()" />
        <input type="button" value="结束" onclick="end()" />
</body>
<div id="num_text">
</div>
<script>
    var i = 1;
    var t = Object;
    function setNum() {
      var res = document.getElementById('num_text')
      res.innerHTML = i;
      res.style.fontSize = '200px'
      i++;
      // 超过100重置
      if(i === 100){
         i = 1;
      }
    }
    function start() {
      t = setInterval(setNum, 10)
    }
    function end() {
      t = clearInterval(t)
    }
</script>
</html>

Effect

Code analysis

First let a number start a rapid loop, and complete it by using setInterval. When the click is over, call clearInterval to clear the timer to achieve the effect of freezing. The specific loop can be replaced with a prize array or other data, and this effect can also be achieved.

Summarize

Choose three more representative cases, pym can also be expanded through the above three simple cases to achieve the effect of exercising the JS timer. For example, the calendar clock can be made into a dial that allows the hours, minutes and seconds to rotate.

If there are 50 likes, arrange it!

thanks

Universal network
And the hardworking self, personal blog , GitHub test , GitHub
Public Account-Guizimo, Mini Program-Xiaogui Blog

[JavaScript timer small case] Several common timer implementation cases