脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js倒计时动画

js实现酷炫倒计时动画

 更新时间：2022年07月13日 11:10:41   作者：#麻辣小龙虾#  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript中连接操作Oracle数据库实例

    JavaScript中连接操作Oracle数据库实例

    这篇文章主要介绍了JavaScript中连接操作Oracle数据库实例,本文讲解了运行环境、代码实例、运行结果等一系列完整步骤,需要的朋友可以参考下
    2015-04-04
  • BootStrap Table 获取同行不同列元素的方法

    BootStrap Table 获取同行不同列元素的方法

    表格同行中存在元素的相互调用，如何保证元素能够被同行不同列的其他方框使用呢？下面通过实例代码给大家介绍下，一起看看吧
    2016-12-12
  • javascript 数据结构的题

    javascript 数据结构的题

    面试题是3个数据结构的题，可以用java/c/c++/python实现，靠，js也能实现，鄙视js？我上机就用js写的，虽说肯定没戏，但js我挺。
    2008-07-07
  • JS块级作用域和私有变量实例分析

    JS块级作用域和私有变量实例分析

    这篇文章主要介绍了JS块级作用域和私有变量,结合实例形式较为详细的分析了javascript块级作用域和私有变量相关概念、原理、操作技巧,需要的朋友可以参考下
    2019-05-05
  • 详解小程序输入框闪烁及重影BUG解决方案

    详解小程序输入框闪烁及重影BUG解决方案

    这篇文章主要介绍了详解小程序输入框闪烁BUG解决方案,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JS创建对象几种不同方法详解

    JS创建对象几种不同方法详解

    这篇文章主要为大家详细介绍了javascript创建对象的几种不同方法
    2016-03-03
  • 原生JS+HTML5实现的可调节写字板功能示例

    原生JS+HTML5实现的可调节写字板功能示例

    这篇文章主要介绍了原生JS+HTML5实现的可调节写字板功能,涉及javascript结合HTML5属性动态操作页面元素实现绘图功能相关技巧,需要的朋友可以参考下
    2018-08-08
  • 最佳的JavaScript错误处理实践

    最佳的JavaScript错误处理实践

    在JavaScript中遇到处理错误很让人头疼，这篇文章整理了JavaScript错误处理实践，有需要的小伙伴们可以参考。
    2016-07-07
  • javascript常用函数（2）

    javascript常用函数（2）

    这篇文章主要介绍了javascript常用函数，再来15个常用函数，都具有很高的实用性，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript变量提升和严格模式实例分析

    JavaScript变量提升和严格模式实例分析

    这篇文章主要介绍了JavaScript变量提升和严格模式,结合实例形式分析了javascript变量提升和严格模式的原理及相关操作注意事项,需要的朋友可以参考下
    2019-01-01

最新评论