一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
前言
2022年已經(jīng)接近尾聲了,馬上又是新的一年。每天都數(shù)著日子,期待放假,回家過年了。今天來(lái)簡(jiǎn)單實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能,能夠?qū)崟r(shí)看到還有多少天就過年了。
具體實(shí)現(xiàn)
1. 畫紅燈籠
為了增加一些快過年的喜慶氛圍,因此使用css實(shí)現(xiàn)了兩個(gè)紅燈籠展示到頁(yè)面上。
燈籠分成4個(gè)部分組成,燈籠頂部、燈籠主體、燈籠底部、燈籠穗。
<div class="lantern"> <div class="lantern-top"></div> <div class="lantern-inner"> 福 </div> <div class="lantern-bottom"></div> <ul class="ribbons"> <li></li> ... </ul> </div>
燈籠的頂部、底部為黃色長(zhǎng)方形的形狀,并設(shè)置不同方向邊角的弧度,實(shí)現(xiàn)形狀圓滑
.lantern-top, .lantern-bottom { margin: 0 auto; position: relative; width: 25%; height: 7%; background-color: #ffd700; z-index: 11; } .lantern-top { border-top-left-radius: 10px; border-top-right-radius: 10px; }
燈籠主體為寬高一致的正方形,并使用border-radius
屬性設(shè)置邊角的弧度,實(shí)現(xiàn)燈體圓滾滾的形狀。使用box-shadow
屬性設(shè)置陰影,實(shí)現(xiàn)燈籠發(fā)光的效果
.lantern-inner { width: 50%; height: 50%; margin: 0 auto; position: relative; font-size: 60px; color: #ffd700; border-radius: 40px; box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1); background-color: #f00; display: flex; justify-content: center; align-items: center; z-index: 20; }
燈穗由10個(gè)紅色、黃色相間的長(zhǎng)條組成,給偶數(shù)的li設(shè)置黃色的背景,奇數(shù)的li設(shè)置紅色的背景,并設(shè)置一個(gè)左右晃動(dòng)的動(dòng)畫。整個(gè)燈籠也需要加上這個(gè)動(dòng)畫,實(shí)現(xiàn)在風(fēng)中搖曳的效果。
@keyframes wobble { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
2. 實(shí)現(xiàn)新年倒計(jì)時(shí)效果
a. 首先獲取頁(yè)面中展示倒計(jì)時(shí)天數(shù)、小時(shí)數(shù)、分鐘數(shù)、秒數(shù)的各個(gè)元素。
b. 計(jì)算剩余時(shí)間
獲取2023年除夕(1月21號(hào))的時(shí)間戳、以及當(dāng)前日期的時(shí)間戳,兩個(gè)時(shí)間戳相減,得到剩余的時(shí)間,根據(jù)這個(gè)時(shí)間計(jì)算有多少天、多少小時(shí)、多少分鐘、多少秒,再把計(jì)算出的相應(yīng)數(shù)值展示到頁(yè)面上。(ps: 當(dāng)剩余時(shí)間為0或者小于0,則不用展示時(shí)間了,直接展示文字‘新年快樂’)
c. 寫一個(gè)定時(shí)器,每個(gè)一秒鐘,執(zhí)行一次計(jì)算時(shí)間的函數(shù),實(shí)現(xiàn)時(shí)間的實(shí)時(shí)改變。當(dāng)剩余時(shí)間小于等于1秒鐘,則可以清除定時(shí)器,不用計(jì)算剩余時(shí)間了
const countText = document.querySelector('.count-down') const d = document.querySelector('.days'); const h = document.querySelector('.hours'); const m = document.querySelector('.minutes'); const s = document.querySelector('.seconds'); function getTrueNumber(num) { return num < 10 ? "0" + num : num; } function calculateRemainingTime() { const comingYear = new Date().getFullYear() + 1; const comingDate = new Date(`Jan 21, ${comingYear} 00:00:00`); const now = new Date(); const remainingTime = comingDate.getTime() - now.getTime(); const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const secs = Math.floor((remainingTime % (1000 * 60)) / 1000); d.innerHTML = getTrueNumber(days); h.innerHTML = getTrueNumber(hours); m.innerHTML = getTrueNumber(mins); s.innerHTML = getTrueNumber(secs); if(remainingTime <= 0){ countText.innerHTML = '新年快樂' } return remainingTime; } function initCountdown() { const interval = setInterval(() => { const remainingTimeInMs = calculateRemainingTime(); if (remainingTimeInMs <= 1000) { clearInterval(interval); } }, 1000); } initCountdown();
3. 實(shí)現(xiàn)雪花紛飛的場(chǎng)景
根據(jù)上一篇文章《給南方的冬季,來(lái)一場(chǎng)紛紛揚(yáng)揚(yáng)的大雪》,實(shí)現(xiàn)下雪,突現(xiàn)瑞雪兆豐年的寓意
最終的效果展示
總結(jié)
到此這篇關(guān)于用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)新年倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- js實(shí)現(xiàn)日期天數(shù)、時(shí)分秒的倒計(jì)時(shí)完整代碼
- JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
- JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解
- JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)倒計(jì)時(shí)器
- javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
- 用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例
- JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
相關(guān)文章
如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法
這篇文章主要給大家介紹了關(guān)于如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01JS+CSS實(shí)現(xiàn)分類動(dòng)態(tài)選擇及移動(dòng)功能效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)分類動(dòng)態(tài)選擇及移動(dòng)功能效果代碼,涉及JavaScript實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10js實(shí)現(xiàn)屏幕自適應(yīng)局部代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)屏幕自適應(yīng)局部代碼分享,需要的朋友可以參考下2015-01-01javascript 可控式透明特效實(shí)現(xiàn)代碼
透明特效是script.aculo.us提到的特效中最簡(jiǎn)單的特效之一。既然是特效,必須涉及時(shí)間與空間的概念。時(shí)間我們可以用setTimeout與setInterval,個(gè)人比較喜歡setTimeout,雖然它每次調(diào)用都重復(fù)注冊(cè),但可控性比較好。2010-01-01JavaScript常用的返回,自動(dòng)跳轉(zhuǎn),刷新,關(guān)閉語(yǔ)句匯總
這篇文章主要介紹了JavaScript常用的返回,自動(dòng)跳轉(zhuǎn),刷新,關(guān)閉語(yǔ)句,實(shí)例匯總了常用的javascript技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01javascript(js)的小數(shù)點(diǎn)乘法除法問題詳解
本篇文章主要是對(duì)javascript(js)中的小數(shù)點(diǎn)乘法除法問題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-03-03使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細(xì)介紹了使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10