js实现酷炫倒计时动画
作者：#麻辣小龙虾# 时间：2024-06-13 21:25:49
本文实例为大家分享了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
标签：js,倒计时
0
投稿猜你喜欢
python基础编程小实例之计算圆的面积
2023-06-07 06:33:14
asp.net mvc4 mysql制作简单分页组件（部分视图）
2024-01-27 17:56:36
ThinkPHP基于think-queue的队列插件实现消息推送
2023-05-25 05:59:12
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2022-05-14 00:35:25
MySQL 数据查重、去重的实现语句
2024-01-25 10:46:34
Django 用户登陆访问限制实例 @login_required
2021-05-26 07:31:22
关于document.cookie的使用javascript
2024-04-30 08:55:32
获取 Textarea 的光标位置
2010-11-30 21:33:00
产品设计与用户体验
2009-02-02 10:15:00
Python笔记之工厂模式
2022-11-07 17:58:47
PHP伪协议基本原理介绍
2023-05-30 00:24:11
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2024-05-09 15:22:50
matplotlib图例legend语法及设置的方法
2023-01-07 04:23:37
Python使用future处理并发问题方案详解
2022-12-10 18:16:53
Pytorch如何切换 cpu和gpu的使用详解
2023-08-22 03:30:11
jquery validate.js表单验证的基本用法入门
2023-07-02 05:30:47
如何在scrapy中捕获并处理各种异常
2023-04-10 06:56:23
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2023-09-08 08:07:37
JS中数组重排序方法
2024-04-22 22:34:27
PyTorch上实现卷积神经网络CNN的方法
2023-10-30 11:37:05