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>

js实现酷炫倒计时动画效果相关推荐

赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
QQuickWidget + QML编程实现酷炫动态动画效果
1.具体需求:当Qt开发项目中需要实现简单的动态酷炫动画效果时,我们可以使用Qt中的QQuickWidget来实现,同时还可以使用QML编程来实现具体的动画效果,具体实现的效果如下所示: 2.具体操作 ...
Python制作酷炫的动画效果
1 引言利用Python的Matplotlib-Animation库可以制作酷炫的数学公式动画,官方教程可访问链接. 本文为了清晰说明如何利用Animation类来实现动画效果,这里采用介绍一个点沿 ...
西门子界面官方精美触摸屏+WINCC程序模板西门子官方触摸屏程序模板，炫酷的扁平式动画效果，脚本动画，自动生成二维码，可仿真，堪比智能手机，有精简，精致，wincc，无线面板等包含了所有西门子人机界
西门子界面官方精美触摸屏+WINCC程序模板西门子官方触摸屏程序模板,炫酷的扁平式动画效果,脚本动画,自动生成二维码,可仿真,堪比智能手机,有精简,精致,wincc,无线面板等包含了所有西门子人机界 ...
想实现前端酷炫的打字机效果吗
实现酷炫的打字机效果插件typed.js 前言: 最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西.看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思 ...
Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍实验介绍在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
canvas实战之酷炫背景动画（二）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
canvas实战之酷炫背景动画（一）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...

js实现酷炫倒计时动画效果

js实现酷炫倒计时动画效果相关推荐

最新文章

热门文章