這篇“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如何實現酷炫倒計時動畫”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
