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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
命名空间一个最明确的目的就是解决重名问题。这篇文章主要介绍了TypeScript 命名空间的相关知识，本文通过实例详解给大家介绍的非常详细,需要的朋友可以参考下2020-03-03
闭包是ECMAScript一个很重要的特征，但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述，但是，却很容易创建，或者说，不小心创建。然而，闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包，以及更好地利用闭包的优点，有必要理解闭包的机制2013-11-11
JavaScript Object.defineProperty与proxy代理模式的使用详细分析
这篇文章主要介绍了JavaScript Object.defineProperty与proxy代理模式的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
本篇文章主要介绍了用js实现before和after伪类的样式修改的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了JS清除选择内容的方法,较为详细的分析了js操作文本的技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了微信小程序云开发实现分页刷新获取数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
html中的<video>标签可以用来播放常见的音视频格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，当然支持的格式也和浏览器和操作系统有关，这篇文章主要介绍了video标签自动播放音视频并绘制波形图,需要的朋友可以参考下2023-09-09
返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项，这篇文章主要介绍了JS本地刷新返回上一页代码，感兴趣的小伙伴们可以参考一下2016-07-07
这里给大家分享一个JavaScript实现的根据汉字可以自动转换简拼代码，有需要的朋友可以参考一下，并非本人原创来自网络。2016-09-09
本篇文章主要介绍了babel之配置文件.babelrc入门详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论