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 注释

您的项目需求