用JS怎样做数字放大倒计时的效果-群英

上一篇：JS时间复杂度和空间复杂度是什么，有何意义下一篇：VUE页面自适应布局怎样做，有啥问题要注意

今天就跟大家聊聊有关“用JS怎样做数字放大倒计时的效果”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“用JS怎样做数字放大倒计时的效果”文章能对大家有帮助。

前段时间和朋友去音乐餐厅吃饭，中间有个活动，然后看到他们软件公众号H5有个活动开始的倒计时的动画效果，于是想了下实现思路。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js实现酷炫倒计时动画效果</title>
    <style>
      *{margin:0;padding:0;}
      body{width:100%;height:100%;overflow:hidden;}
      .box{width:1000px;height:700px;margin:100px auto;}
      .btn{width:100px;height:100px;margin:50px auto 0;font-size:16px;color:#fff;text-align:center;line-height:100px;border-radius:100px;background:#3385ff;}
      .btn:hover{box-shadow: 0 0 10px #77aeff;cursor:pointer;}
      h1{font-size:300px;color:red;text-align:center;}
      h1.active{animation:count .5s;}
      @keyframes count {
        from {
          transform: scale(.1);
          opacity: 1;
        }
        to {
          transform: scale(3.5);
          opacity: 0;
          display:none;
        }
      }
    </style>
</head>
<body>
  <div class="btn">倒计时</div>
  <div class="box">
    <h1 style="display:none;">10</h1>
  </div>
</body>
<script>
  let NUMBER = 1;
  let COUNT = 10;
  let COLORS = ['#8c00ff', '#006bff', '#4fff00', '#ffb800', '#ff0000'];
  let timer = null;
  function $(str) {
    return document.querySelector(str);
  }
  function actionNum () {
    let h1 = $('h1');
    $('h1').style.display = 'block';
    timer = setInterval(() => {
      COUNT--;
      NUMBER++;
      if (COUNT >= 0) {
        h1.classList.remove('active');
        setTimeout(() => {
          let num = Math.floor(Math.random()*5);
          h1.innerText = COUNT;
          h1.style.color = COLORS[num];
          h1.classList.add('active');
        }, 100);
      } else {
        clearInterval(timer);
      }
    }, 1000);
  }
  $('.btn').onclick = function () {
    if (COUNT < 0) {
      COUNT = 11;
    }
    actionNum();
  };
</script>
</html>

到此这篇关于“用JS怎样做数字放大倒计时的效果”的文章就介绍到这了,更多相关用JS怎样做数字放大倒计时的效果内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！