一步步教你用js簡單實現(xiàn)新年倒計時
前言
2022年已經接近尾聲了，馬上又是新的一年。每天都數(shù)著日子，期待放假，回家過年了。今天來簡單實現(xiàn)一個倒計時功能，能夠實時看到還有多少天就過年了。
具體實現(xiàn)
1. 畫紅燈籠
為了增加一些快過年的喜慶氛圍，因此使用css實現(xiàn)了兩個紅燈籠展示到頁面上。
燈籠分成4個部分組成，燈籠頂部、燈籠主體、燈籠底部、燈籠穗。
<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>燈籠的頂部、底部為黃色長方形的形狀，并設置不同方向邊角的弧度，實現(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屬性設置邊角的弧度，實現(xiàn)燈體圓滾滾的形狀。使用box-shadow屬性設置陰影，實現(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個紅色、黃色相間的長條組成，給偶數(shù)的li設置黃色的背景，奇數(shù)的li設置紅色的背景，并設置一個左右晃動的動畫。整個燈籠也需要加上這個動畫，實現(xiàn)在風中搖曳的效果。
@keyframes wobble {
0%,
100% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
}2. 實現(xiàn)新年倒計時效果
a. 首先獲取頁面中展示倒計時天數(shù)、小時數(shù)、分鐘數(shù)、秒數(shù)的各個元素。
b. 計算剩余時間
獲取2023年除夕（1月21號）的時間戳、以及當前日期的時間戳，兩個時間戳相減，得到剩余的時間，根據這個時間計算有多少天、多少小時、多少分鐘、多少秒，再把計算出的相應數(shù)值展示到頁面上。（ps: 當剩余時間為0或者小于0，則不用展示時間了，直接展示文字‘新年快樂’）
c. 寫一個定時器，每個一秒鐘，執(zhí)行一次計算時間的函數(shù)，實現(xiàn)時間的實時改變。當剩余時間小于等于1秒鐘，則可以清除定時器，不用計算剩余時間了
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. 實現(xiàn)雪花紛飛的場景
根據上一篇文章《給南方的冬季，來一場紛紛揚揚的大雪》，實現(xiàn)下雪，突現(xiàn)瑞雪兆豐年的寓意
最終的效果展示
總結
到此這篇關于用js簡單實現(xiàn)新年倒計時的文章就介紹到這了,更多相關js實現(xiàn)新年倒計時內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了JavaScript調用C語言的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了JS動態(tài)修改圖片的URL（src）的方法,涉及javascript操作圖片src屬性的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
本文給大家匯總介紹了javascript格式化日期時間的幾種常用方法，個人對最后一種個性化輸出時間比較有興趣，基本上只要項目中能用到都是使用這種，推薦給小伙伴們。2015-10-10
這篇文章主要幫助大家理解學習javascript封裝，通過封裝可以強制實施信息隱藏，本文為大家分析了封裝的利弊，感興趣的小伙伴們可以參考一下2016-02-02
下面小編就為大家?guī)硪黄猚onfirm確認對話框的實現(xiàn)方法總結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JS類中定義原型方法的兩種實現(xiàn)的區(qū)別...2007-03-03
這篇文章主要介紹了js腳本中執(zhí)行java后臺代碼方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
JavaScript事件的默認行為指瀏覽器自動執(zhí)行的操作,如鏈接跳轉或表單提交,阻止這些行為可以使用event.preventDefault()、return?false或event.returnValue屬性,event.stopPropagation()用于阻止事件傳播,不直接阻止默認行為,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Javascript for in的缺陷總結的相關資料,需要的朋友可以參考下2017-02-02
在一個瀏覽器里呈現(xiàn)所有瀏覽器測試結果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個小小的東西,就要打開N個瀏覽器,然后比較來比較去,記錄個瀏覽器的數(shù)據,比較不同,實在是麻煩.2010-03-03