js实现酷炫倒计时动画
作者：#麻辣小龙虾# 发布时间：2024-06-13 21:25:49
标签：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>
来源：https://blog.csdn.net/CodingNoob/article/details/102571273
0
投稿猜你喜欢
- 本文实例讲述了Django实现图片文字同时提交的方法。分享给大家供大家参考。具体分析如下：jQuery为我们网站开发解决了很多问题，使我们的
在做项目的时候因为数据比较多，一次性全部渲染的话会花费较多的时间，所以，想到每一次渲染10条数据也想过每一次获取十条数据然后显示就行了，就目- 本文实例讲述了PHP实现将浏览历史页面网址保存到cookie的方法。分享给大家供大家参考。具体如下：将浏览历史页面网址保存到cookie，大
- 1.Python是如何进行内存管理的？答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制一、对象的引用计数机制Pytho
- 我是这样来做DIV布局代码的．不知道说的清楚不清楚，凑和看吧我把class分为２种，布局class，风格class，布局class是骨架，风
- 我就废话不多说，直接上代码吧！# -*- coding: utf-8 -*-import cv2import numpy as npfrom
- 本文实例讲述了Python事务操作实现方法。分享给大家供大家参考，具体如下：#coding=utf-8import sysimport My
- 前言：最近碰到业务需要根据PSD文件实现PSD文件解析图层功能，搜到了Python的一个解析PSD的库。这个库就是psd-tools，psd
- 在学习tensorflow的过程中，有一个问题，tensorflow在训练的过程中读取的是二进制图像数据库文件，而不是图像文件，因此在进行训
- 本文实例讲述了PHP实现逐行删除文件右侧空格的方法。分享给大家供大家参考，具体如下：在编辑整理代码的过程中发现网上的一些代码经常会有不少的右
- import time# time模块中包含了许多与时间相关的模块，其中通过time()函数可以获取当前的时间。count = 100pri
- 今天启动SQLServer2000时报1053错误 错误如下所示： 发生错误 1053－（服务没有及时响应或控制请求。），此时正在 MSSQ
- 想买mate40，但总是抢不到，所以想试着能不能写个脚本代码。第一步：把想要抢购的商品加进购物车，注意：脚本是对购物车内全部商品进行下单操作
- 在日常生活中总是有给图像分类的场景，比如垃圾分类、不同场景的图像分类等；今天的文章主要是基于图像识别场景进行模型构建。图像识别是通过 Pyt
- 【原文地址】New "Orcas" Language Feature: Extension Methods【原文发表日期
- 上代码：#coding=utf-8import cv2import dlibpath = "imagePath/9.jpg&quo
- 前言:Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分。文本总是Unicode，由str类型表示，二进制数据则由by
- 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能？这个功能允许用文字和图片做为主菜单，如果用文字的话要先做虚拟链接。下面简单
- 问题Vue项目中需要用Echarts的柱状图显示数据，并且每次搜索要更新柱状图。这时候小编发现在控制台会出现这样的报错：原来的代码是这样的，
- python画图时linestyle,color和loc参数的设置本人没有看过专门介绍matplotlib的书籍，所以一直以来对一些画图的风
