百度360必应搜狗淘宝本站头条
filter函数excel用不了新代系统编程教学软件培训影视网站免费源码最新版网站留言板代码大全
当前位置：网站首页 > 文章教程 > 正文

100行Html5+CSS3+JS代码实现元旦倒计时界面

yund56 2025-04-26 20:21 7 浏览

一、前言


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”哦

相关推荐

了解计算机网络90个常见概念

计算机网络系列篇第一篇:90个常见概念定义如下:主机：计算机网络上任何一种能够连接网络的设备都被称为主机或者说端系统，比如手机、平板电脑、电视、游戏机、汽车等，随着5G的到来，将会有越来越多的终...

数控技巧:数控常用工艺术语(英文名称)

1工艺基本概念1.1一般概念1.1.1数控加工：numericalcontrolmachining根据被加工零件图样和工艺要求，编制成以数码表示的程序输入到机床的数控装置或控制计算机中，以...

常用模具零件广东术语，不会怎么混天下?

广东属最早引进模具工业地方之一,在工业界模具被称为永不衰败的行业,由于各师各法,广东各地对模具称呼的术语很多,有些不知怎译!!!为方便大家对模具术语交流，小编给大家整理了模具零件在广东的常用术语。深圳...

开发人员自我提升 - 软件开发技术术语表

开发工具与环境IDE(集成开发环境)VisualStudioCodeIntelliJIDEAEclipsePyCharmVersionControl(版本控制)GitSVNMercuria...

程序员术语趣味解释(1)

1.hotfixhotfix通常指的是一种紧急修复措施，用于解决已知的、严重的问题，比如安全漏洞、程序崩溃等。hotfix并不会包含任何新的功能或升级，它只是一个小型的程序补丁，能够快速而且有针对性地...

挑战 50 年霸主 C 语言:新语言 Hare，“异端”中的保守派

Hare原意为野兔，它的开发者希望这种编程语言能够如野兔般拥有顽强的生命力。本周，软件开发者DrewDeVault公布了一种名为Hare的全新系统编程语言，并用“简单、稳定和健壮”作为核心...

Python必须掌握的核心术语和概念，涵盖语法、编程范式和常用工具

以下是学习**Python**必须掌握的核心术语和概念，涵盖语法、编程范式和常用工具：---###**一、基础语法**1.**变量（Variable）**-存储数据的容器，无需声明类型，如...

编程中最难的事:如何命名

如何命名，其实是编程中最难的事。乔治·奥威尔的命名规范如何命名？简言之，根据语意来选择词汇，别无它法……然而，有时我们会不知用什么词汇更合适。当你想到某个抽象的东西，你更倾向于最先想到的词语，除非你故...

计算机网络的 166 个核心概念，你知道吗?

上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...

黑客主要术语?什么是木马?什么是肉鸡?

本节将对常见的一些黑客术语进行简单的介绍1.肉鸡所谓肉鸡是一种很形象的比喻，比喻那些可以随意被控制的电脑，对方可以是各种电脑包括但不限于个人电脑，服务器等，在某种情况黑客进攻时会用他们干扰敌人。对直接...

计算机网络的 89 个核心概念

计算机网络中的概念也是非常庞杂，理解起来比较困难，所以这里，我给大家汇总了计算机网络中89个常见的概念，希望对你有所帮助。主机：计算机网络上任何一种能够连接网络的设备都被称为主机或者说端系统，比如...

开发人员自我提升 - 软件开发专业术语表

AAbstractClass(抽象类)-一种不能被实例化的类，用作其他类的模板Agile(敏捷开发)-一种迭代的软件开发方法论Algorithm(算法)-解决特定问题的一系列明确的...

Python编程术语词汇表(一)

这是一个非官方的Python编程术语表，是日常编程实践以及网络收藏所得的内容集合。Iteration迭代Loopingoveraniterableobject.遍历可迭代对象。Afor...

计算机领域有哪些高大上的术语描述的是很简单的事物?

云计算说白了就是服务器租赁，服务器在网线另一头，你也不用知道具体在哪，如远在天边的云。好比你想打网页小游戏，只想玩一次。你不会为此买个电脑、耳麦，再开通个宽带。你可能会去网吧，按时付费。网吧有按小时...

AI能代替你阅读吗

来源：科技日报原标题：AI能代替你阅读吗信息爆炸的当下，高校学生的阅读场景正经历着颠覆性变革——借助AI工具，他们不仅可以快速拓展通识阅读知识面，还可以轻松完成课堂上的深度思考作业，不用翻开书页就能...

一周热门
最近发表
标签列表
蜀ICP备2024111239号-27