脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

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

您可能感兴趣的文章:

相关文章

  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    这篇文章主要给大家介绍了关于VSCode中如何利用d.ts文件进行js智能提示的相关资料，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2018-04-04
  • 微信小程序关键字变色实现代码实例

    微信小程序关键字变色实现代码实例

    这篇文章主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 深入理解JavaScript字节二进制知识以及相关API

    深入理解JavaScript字节二进制知识以及相关API

    当前，前端对二进制数据有许多的API可以使用，这丰富了前端对文件数据的处理能力，有了这些能力，就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识，希望对大家有所帮助
    2023-02-02
  • vue路由权限校验功能的实现代码

    vue路由权限校验功能的实现代码

    这篇文章主要介绍了vue路由权限校验功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JS中的算法与数据结构之栈(Stack)实例详解

    JS中的算法与数据结构之栈(Stack)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之栈(Stack),结合实例形式详细分析了js中栈的概念、原理、定义及常见使用方法,需要的朋友可以参考下
    2019-08-08
  • JavaScript检测原始值、引用值、属性

    JavaScript检测原始值、引用值、属性

    这篇文章主要介绍了JavaScript检测原始值、引用值、属性的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • js实现文字垂直滚动和鼠标悬停效果

    js实现文字垂直滚动和鼠标悬停效果

    这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • ES6解构赋值的功能与用途实例分析

    ES6解构赋值的功能与用途实例分析

    这篇文章主要介绍了ES6解构赋值的功能与用途,结合实例形式分析了ES6结构赋值针对函数参数、赋值、json等相关操作使用技巧,需要的朋友可以参考下
    2017-10-10
  • js调用设备摄像头的方法

    js调用设备摄像头的方法

    这篇文章主要为大家详细介绍了js调用设备摄像头的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 前端JavaScript经典操作之数组常用方法总结

    前端JavaScript经典操作之数组常用方法总结

    数组操作是JavaScript中非常重要也非常常用的技巧,这篇文章主要给大家介绍了关于前端JavaScript经典操作之数组常用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07

最新评论