100行Html5+CSS3+JS代碼實現元旦倒計時

100行Html5+CSS3+JS代碼實現元旦倒計時界面

、前言

2022年到了，祝大家虎年大吉喜氣臨，昂首擺尾迎春來。雙眼圓睜看世界，萬水千山盡開顏。胡須翹翹美姿態，人人開心祝平安。巨大身軀搖擺擺，坎坷困境當笑談。愿你虎年萬事順，吉星高照旺旺旺！

二、2022虎年計時

總體效果展示：

局部計時效果展示：

三、步驟

1.下載VSCode

下載鏈接：VSCodeVisual Studio Code - Code Editing. Redefined

在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)

最后，祝大家2022年新年快樂！需要Python配套學習資料私信“666”哦

年快樂

每當我們在元旦，年會的時刻，總是無法避免地出現抽獎環節。身為專業程序員的我們自然應當負起這份責任，確保這場抽獎活動能夠順利流暢地進行下去。然而，面對眾多待完成的工作任務，我們恐怕又需要進一步延長加班時間來應對。請別擔憂，在此，為您提供了一款卓越出色的現成抽獎網頁，可用于此次年度盛典的抽獎環節中。首先，讓我們共同欣賞一下實際應用表現吧！

抽獎效果

此頁面所有實現均采用最基本的JavaScript、html和jQuery技術完成，無需使用任何框架，開箱即用。

設置數據

參與抽獎的數據需要提前設定好，在 js 目錄中，data.js 里，文件和結構如下：

人員數據

personArray.push({
  id: 546,
  image :"img/tx.png",
  thumb_image :"img/tx.png",
  name: "張三"
});

每個數據都按此標準結構構建即可。img 可以使用默認的，也可以自行提供照片，id 需要隨機指定一個數字，保證不與列表內的其他數據相同即可。設置新數據后刷新后就能使用。

功能擴展

現有的功能里沒有作弊選項（不能設置必中項），而且一個人可以重復多次中獎，因此需要添加以下內容來擴展。

# 編輯lucy.js
# 在Obj 對象下定義兩個變量

Obj.writeList=[0] # 用于存放白名單列表
Obj.hasLuck=[] # 用于記錄已中獎下標

# 新增去重函數
function doRepeatResult(num){
  console.log(Obj.hasLuck.length, personArray.length)
  if(Obj.hasLuck.includes(num)){
    console.log('存在重復中獎, 重新抽獎', num )
    num=num - 1
    if(num < 0){
      num=num + personArray.length
    }
    if(Obj.hasLuck.length >=personArray.length){
      return 0
    }
    return doRepeatResult(num)
  }
  return num
}

# 重寫中獎隨機函數
function randomLuckyArr() {
    Obj.luckyResult=[];
    for (var i=0; i < Obj.luckyNum; i++) {
        var random=Math.floor(Math.random() * personArray.length);
        if (Obj.luckyResult.indexOf(random)==-1) {
    if(Obj.writeList.length > 0 && Obj.hasLuck.length > 2){
      random=Obj.writeList[0]
      random=doRepeatResult(random)
      Obj.luckyResult.push(random)
      Obj.writeList.shift()
    } else {
      random=doRepeatResult(random)
      Obj.luckyResult.push(random)
    }
            Obj.hasLuck.push(random)
        } else {
            i--;
        }
  console.log("已中獎下標", Obj.hasLuck)
    }
}

在上述代碼中，提供一個去重函數，并使用遞歸調用，保證每次數據都做去重校驗。如果數據有重復，則使用當前下標減一，如果小于 0 則，直接將下標調到最大，如果所有人都中獎了，則始終返回第一個人的結果。

在randomLuckyArr 中，則調用去重函數，并將每次中獎的數據都保存到 hasLuck 中。

對于需要暗箱的內容的內容則在luckyResult.push 之前，寫好相應的邏輯即可，如上代碼中，就是抽 3 回后保證第 4 回，中獎的人為writeList 中的（暗箱雖好，可不要貪杯[靈光一閃]）。

有需要的朋友請來個三連獲取。

#文章首發挑戰賽#

#頭條創作挑戰賽#

#挑戰30天在頭條寫日記#

#我的2023年終總結#

avaScript 注釋可用于提高代碼的可讀性。

JavaScript 注釋

JavaScript 不會執行注釋。

我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性。

單行注釋以 // 開頭。

代碼練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 注釋</title>
</head>
<body>
<h1 id="q"></h1>
<p id="w"></p>
<script>
    // 輸出標題：
    document.getElementById("q").innerHTML="Welcome to my Homepage";
    // 輸出段落：
    document.getElementById("w").innerHTML="This is my first paragraph.";
</script>
</body>
</html>

運行結果：

在線咨詢

上一篇：JavaScript數組的toString()和jo
下一篇：智慧樹巴蜀文化答案

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

100行Html5+CSS3+JS代碼實現元旦倒計時

設置數據

功能擴展

JavaScript 注釋

您的項目需求