欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年07月13日 11:10:41   作者：#麻辣小龍蝦#  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺析TypeScript 命名空間

    淺析TypeScript 命名空間

    命名空間一個(gè)最明確的目的就是解決重名問(wèn)題。這篇文章主要介紹了TypeScript 命名空間的相關(guān)知識(shí)，本文通過(guò)實(shí)例詳解給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2020-03-03
  • 理解Javascript閉包

    理解Javascript閉包

    閉包是ECMAScript一個(gè)很重要的特征，但是卻很難用合適的定義來(lái)描述它。雖然閉包很難清晰地描述，但是，卻很容易創(chuàng)建，或者說(shuō)，不小心創(chuàng)建。然而，閉包的存在其實(shí)是有一定的潛在問(wèn)題的。為了避免“不小心”地創(chuàng)建閉包，以及更好地利用閉包的優(yōu)點(diǎn)，有必要理解閉包的機(jī)制
    2013-11-11
  • JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析

    JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析

    這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2022-10-10
  • 用js實(shí)現(xiàn)before和after偽類(lèi)的樣式修改的示例代碼

    用js實(shí)現(xiàn)before和after偽類(lèi)的樣式修改的示例代碼

    本篇文章主要介紹了用js實(shí)現(xiàn)before和after偽類(lèi)的樣式修改的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
    2017-09-09
  • JS清除選擇內(nèi)容的方法

    JS清除選擇內(nèi)容的方法

    這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細(xì)的分析了js操作文本的技巧,需要的朋友可以參考下
    2015-01-01
  • 微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)

    微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)

    這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • JS中video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖效果

    JS中video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖效果

    html中的<video>標(biāo)簽可以用來(lái)播放常見(jiàn)的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖,需要的朋友可以參考下
    2023-09-09
  • JS本地刷新返回上一頁(yè)代碼

    JS本地刷新返回上一頁(yè)代碼

    返回上一頁(yè)并刷新在此功能有利于用戶(hù)的體驗(yàn),是每一個(gè)web開(kāi)發(fā)人員所必備的一項(xiàng)，這篇文章主要介紹了JS本地刷新返回上一頁(yè)代碼，感興趣的小伙伴們可以參考一下
    2016-07-07
  • javascript實(shí)現(xiàn)根據(jù)漢字獲取簡(jiǎn)拼

    javascript實(shí)現(xiàn)根據(jù)漢字獲取簡(jiǎn)拼

    這里給大家分享一個(gè)JavaScript實(shí)現(xiàn)的根據(jù)漢字可以自動(dòng)轉(zhuǎn)換簡(jiǎn)拼代碼，有需要的朋友可以參考一下，并非本人原創(chuàng)來(lái)自網(wǎng)絡(luò)。
    2016-09-09
  • babel之配置文件.babelrc入門(mén)詳解

    babel之配置文件.babelrc入門(mén)詳解

    本篇文章主要介紹了babel之配置文件.babelrc入門(mén)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02

最新評(píng)論