js實現(xiàn)酷炫倒計時動畫
更新時間：2022年07月13日 11:10:41 作者：#麻辣小龍蝦#
這篇文章主要為大家詳細介紹了js實現(xiàn)酷炫倒計時動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)酷炫倒計時動畫的具體代碼，供大家參考，具體內(nèi)容如下
前段時間和朋友去音樂餐廳吃飯，中間有個活動，然后看到他們軟件公眾號H5有個活動開始的倒計時的動畫效果，于是想了下實現(xiàn)思路。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <title>js實現(xiàn)酷炫倒計時動畫效果</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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
命名空間一個最明確的目的就是解決重名問題。這篇文章主要介紹了TypeScript 命名空間的相關(guān)知識，本文通過實例詳解給大家介紹的非常詳細,需要的朋友可以參考下2020-03-03
閉包是ECMAScript一個很重要的特征，但是卻很難用合適的定義來描述它。雖然閉包很難清晰地描述，但是，卻很容易創(chuàng)建，或者說，不小心創(chuàng)建。然而，閉包的存在其實是有一定的潛在問題的。為了避免“不小心”地創(chuàng)建閉包，以及更好地利用閉包的優(yōu)點，有必要理解閉包的機制2013-11-11
JavaScript?Object.defineProperty與proxy代理模式的使用詳細分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
用js實現(xiàn)before和after偽類的樣式修改的示例代碼
本篇文章主要介紹了用js實現(xiàn)before和after偽類的樣式修改的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細的分析了js操作文本的技巧,需要的朋友可以參考下2015-01-01
微信小程序云開發(fā)實現(xiàn)分頁刷新獲取數(shù)據(jù)
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)實現(xiàn)分頁刷新獲取數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
JS中video標(biāo)簽自動播放音視頻并繪制波形圖效果
html中的<video>標(biāo)簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標(biāo)簽自動播放音視頻并繪制波形圖,需要的朋友可以參考下2023-09-09
返回上一頁并刷新在此功能有利于用戶的體驗,是每一個web開發(fā)人員所必備的一項，這篇文章主要介紹了JS本地刷新返回上一頁代碼，感興趣的小伙伴們可以參考一下2016-07-07
javascript實現(xiàn)根據(jù)漢字獲取簡拼
這里給大家分享一個JavaScript實現(xiàn)的根據(jù)漢字可以自動轉(zhuǎn)換簡拼代碼，有需要的朋友可以參考一下，并非本人原創(chuàng)來自網(wǎng)絡(luò)。2016-09-09
本篇文章主要介紹了babel之配置文件.babelrc入門詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02