这篇“js如何实现酷炫倒计时动画”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js如何实现酷炫倒计时动画”文章吧。<!
这篇“js如何实现酷炫倒计时动画”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js如何实现酷炫倒计时动画”文章吧。
<!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;} h2{font-size:300px;color:red;text-align:center;} h2.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"> <h2 >10</h2> </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 h2 = $('h2'); $('h2').style.display = 'block'; timer = setInterval(() => { COUNT--; NUMBER++; if (COUNT >= 0) { h2.classList.remove('active'); setTimeout(() => { let num = Math.floor(Math.random()*5); h2.innerText = COUNT; h2.style.color = COLORS[num]; h2.classList.add('active'); }, 100); } else { clearInterval(timer); } }, 1000); } $('.btn').onclick = function () { if (COUNT < 0) { COUNT = 11; } actionNum(); };</script></html>以上就是关于“js如何实现酷炫倒计时动画”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。
--结束END--
本文标题: js如何实现酷炫倒计时动画
本文链接: https://lsjlt.com/news/343441.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0