JavaScript-定时器应用

定时器应用

• setTimeout

  var id =  setTimeout(function(){
              执行程序
          },时间(单位毫秒));
  
  清除定时器:
  	 clearTimeout(id);
  

• setInterval

  var id =  setInterval(function(){
              执行程序
          },时间(单位毫秒));
  
  清除定时器:
  	 clearInterval(id);
  

• 效果演示

  

• css

   div {
              width: 200px;
              height: 150px;
              border: 2px solid #ccc;
              margin: 100px auto;
          }
  
          div>span {
              text-align: center;
              display: inline-block;
              width: 50px;
              height: 50px;
              color: #09f;
              background-color: #eee;
              line-height: 50px;
              margin-top: 25%;
              margin-left: 4.7%;
          }
  

• html结构

    <div>
          <span class="hour">1</span>
          <span class="minute">2</span>
          <span class="second">3</span>
      </div>
  

• JS原理分析

  // 获取元素
          var hour = document.querySelector('.hour');
          var minute = document.querySelector('.minute');
          var second = document.querySelector('.second');
          var inputTime = +new Date('2020-12-1 22:20:00'); // 返回用户输入的时间总毫秒数
          countDown();
          setInterval(countDown, 1000);
  
          function countDown() {
              var nowTime = +new Date();// 返回当前时间总的毫秒数
              var times = (inputTime - nowTime) / 1000; // times 是剩余时间的总数
              var h = parseInt(times / 60 / 60 % 24); // 时 
              h = h < 10 ? '0' + h : h;
              hour.innerHTML = h;
  
              var m = parseInt(times / 60 % 60);
              m = m < 10 ? '0' + m : m;
              minute.innerHTML = m;
  
              var s = parseInt(times % 60);
              s = s < 10 ? '0' + s : s;
              second.innerHTML = s;
          }
  

  发送验证码

• 效果演示

  

• css源码

   div {
              width: 400px;
              height: 150px;
              border: 2px solid #09f;
              margin: 100px auto;
          }
  
          input {
              border: none;
              outline: none;
              border-bottom: 2px solid red;
              margin-top: 65px;
              margin-left: 20px;
          }
  
          button {
              margin-left: 20px;
          }
  

• html结构

  <div>
          <label for="input">
              <input type="text" id="input"><button> 发送验证码 </button>
          </label>
      </div>
  

• JS原理分析

  var _input = document.querySelector('input');
          var btn = document.querySelector('button');
          var count = 2;
          btn.addEventListener('click', function () {
              var timer = setInterval(function () {
                  if (count == 0) {
                      clearInterval(timer);
                      btn.innerHTML = '发送验证码';
                      btn.disabled = false;
                      count = 2;
                  }
                  else {
                      btn.disabled = true;
                      btn.innerHTML = '还剩余' + count + '秒'
                      count--;
                  }
              }, 1000);
          });