快捷導(dǎo)航

js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫

更新時(shí)間：2022年07月13日 11:10:41 作者：#麻辣小龍蝦#

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

前段時(shí)間和朋友去音樂餐廳吃飯，中間有個(gè)活動(dòng)，然后看到他們軟件公眾號(hào)H5有個(gè)活動(dòng)開始的倒計(jì)時(shí)的動(dòng)畫效果，于是想了下實(shí)現(xiàn)思路。

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <title>js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫效果</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">倒計(jì)時(shí)</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)文章

VSCode中如何利用d.ts文件進(jìn)行js智能提示
這篇文章主要給大家介紹了關(guān)于VSCode中如何利用d.ts文件進(jìn)行js智能提示的相關(guān)資料，文中通過圖文以及示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2018-04-04
微信小程序關(guān)鍵字變色實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序關(guān)鍵字變色實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
深入理解JavaScript字節(jié)二進(jìn)制知識(shí)以及相關(guān)API
當(dāng)前，前端對二進(jìn)制數(shù)據(jù)有許多的API可以使用，這豐富了前端對文件數(shù)據(jù)的處理能力，有了這些能力，就能夠?qū)D片等文件的數(shù)據(jù)進(jìn)行各種處理。本文將著重介紹一些前端二進(jìn)制數(shù)據(jù)處理相關(guān)的API知識(shí)，希望對大家有所幫助
2023-02-02
vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之棧(Stack)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之棧(Stack),結(jié)合實(shí)例形式詳細(xì)分析了js中棧的概念、原理、定義及常見使用方法,需要的朋友可以參考下
2019-08-08
JavaScript檢測原始值、引用值、屬性
這篇文章主要介紹了JavaScript檢測原始值、引用值、屬性的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果
這篇文章主要介紹了js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-12-12
ES6解構(gòu)賦值的功能與用途實(shí)例分析
這篇文章主要介紹了ES6解構(gòu)賦值的功能與用途,結(jié)合實(shí)例形式分析了ES6結(jié)構(gòu)賦值針對函數(shù)參數(shù)、賦值、json等相關(guān)操作使用技巧,需要的朋友可以參考下
2017-10-10
js調(diào)用設(shè)備攝像頭的方法
這篇文章主要為大家詳細(xì)介紹了js調(diào)用設(shè)備攝像頭的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
前端JavaScript經(jīng)典操作之?dāng)?shù)組常用方法總結(jié)
數(shù)組操作是JavaScript中非常重要也非常常用的技巧,這篇文章主要給大家介紹了關(guān)于前端JavaScript經(jīng)典操作之?dāng)?shù)組常用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07