一、前言
2022年到了，祝大家虎年大吉喜氣臨，昂首擺尾迎春來，雙眼圓睜看世界，萬水千山盡開顏，胡須翹翹美姿態，人人開心祝平安，巨大身軀搖擺擺，坎坷困境當笑談，愿你虎年萬事順，吉星高照旺旺旺！
二、2022虎年計時
總體效果展示：
區域計時效果展示：
三、步驟
- 如果之前看過我這篇文章200行Html5+CSS3+JS代碼實作動態圣誕樹，那對于下面的VScode的配置步驟可以省略，
1.下載VSCode
下載鏈接：VSCode
- 在Hbuilder、idea運行也是可以的，這里推薦使用VSCode
2.配置插件
三個插件對應的功能：
- 改寫標簽后自動完善
- 切換成中文頁面
- 讓代碼在網頁中打開，默認鍵Alt+B
3.構建三個檔案
- 在桌面新建一個空的檔案夾，用VSCode打開
- 在VSCode新建三個檔案 index .html style.css script.js （檔案名字要和這個一樣，不然會出錯），把上面的圖片也加入到檔案夾中，命名為2022.png（圖片可以自己選擇，文章中的圖片放到文章最下面了），最后保存別忘了
- 對于檔案的層級問題，三個 index .html style.css script.js 在同一級檔案夾內不要修改，如果在下一個層級或者上面一個層級需要改動選擇
- 在index.html代碼界面，默認鍵Alt+B 或者 滑鼠右擊，選擇倒數第三個Open In Default Browser默認瀏覽器打開
4.添加額外功能
更換背景圖：
- 在css代碼的第八行，html的第六行，更改圖片地址就行了
添加音樂：
- 在index.html代碼中添加下列代碼： <embed src="song.mp3" hidden="false" autostart="true" loop="true">
- src="音樂地址"，把想要播放的音樂，提前放到這個檔案夾中，把這個音樂的命名填入src中就可以播放音樂
- hidden="true"表示隱藏音樂播放按鈕，hidden="false"開啟音樂播放按鈕
- autostart="true" 打開網頁加載完后自動播放
- loop="true"回圈播放 如僅想播放一次則為：loop="false"
四、編碼實作
CSS代碼：
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background-image: url("2022.png");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vm;
font-family: 'Lobster', cursive, sans-serif;
margin: 0;
}
.big-text{
color: rgb(255, 215, 0);
font-size: 3rem;
font-weight: bold;
line-height: 0.5;
margin: 3rem;
}
h1{
color: gold;
font-size: 3rem;
margin-top: 3rem;
}
.countdown-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.countdel {
color: black;
font-size: 2rem;
font-weight: bold;
text-align: center;
}
Html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 下一行可以更換圖片地址 -->
<link rel="shortcut icon" href="2022.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#0000" />
<link href="https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<title>Burmese New Year's Day Countdown</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<meta name="author" content="Thiri San" />
<meta name="keywords" content="Thiri San">
</head>
<body>
<h1>2022新年倒計時</h1>
<div class="countdown-container">
<div class="countdel days-c">
<p class="big-text" id="days">0</p>
<span>天</span>
</div>
<div class="countdel hours-c">
<p class="big-text" id="hours">0</p>
<span>時</span>
</div>
<div class="countdel minutes-c">
<p class="big-text" id="minutes">0</p>
<span>分</span>
</div>
<div class="countdel seconds-c">
<p class="big-text" id="seconds">0</p>
<span>秒</span>
</div>
</div>
</body>
</html>
JS代碼：
const daysEl = document.getElementById('days')
const hoursEl = document.getElementById('hours')
const minutesEl = document.getElementById('minutes')
const secondsEl = document.getElementById('seconds')
const x = new Date().getFullYear()
const y = x+1;
const newYear = new Date(y,0,1,0,0,0,0)
function countdown() {
const newYearsDate = new Date(newYear);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds % 60);
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hours);
minutesEl.innerHTML = formatTime(minutes);
secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time){
return time < 10 ? (`0${time}`) : time;
}
countdown();
setInterval(countdown,1000)
附錄：
零基礎必看的Html5+Css3+移動端前端教程（一）
零基礎必看的Html5+Css3+移動端前端教程(二)
零基礎必看的Html5+Css3+移動端前端教程(三)
零基礎必看的Html5+Css3+移動端前端教程(四)
零基礎必看的Html5+Css3+移動端前端教程(五)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/397393.html
標籤：其他