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

一、前言二、圣诞树效果展示:三、步骤如果之前看过我这篇文章的1.下载VSCode下载链接:VSCode在Hbuilder、idea运行也是可以的,这里推荐使用VSCode2.配置插件三个插件对应的功能:改写标签后自动完善 切换成中文页面 让代码在网页中打开,默认键Alt+B3.构建三个文件在桌面新建一个空的文件夹,用VSCode打开 在VSCode新建三个文件index.htmldomtree….

大家好,又见面了,我是你们的朋友全栈君。

  一、前言   

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

  • 2022年到了,祝大家虎年大吉喜气临,昂首摆尾迎春来。双眼圆睁看世界,万水千山尽开颜。胡须翘翘美姿态,人人开心祝平安。巨大身躯摇摆摆,坎坷困境当笑谈。愿你虎年万事顺,吉星高照旺旺旺!

 二、2022虎年计时

总体效果展示:

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

局部计时效果展示:

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

三、步骤

1.下载VSCode

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

下载链接:VSCode

  • 在Hbuilder、idea运行也是可以的,这里推荐使用VSCode

2.配置插件

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

三个插件对应的功能: 

  • 改写标签后自动完善
  • 切换成中文页面
  • 让代码在网页中打开,默认键Alt+B

3.构建三个文件

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

  • 在桌面新建一个空的文件夹,用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.proxy.ustclug.org/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.proxy.ustclug.org/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+移动端前端教程(五)

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126360.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • adb出现adb server is out of date时的解决的方法

    adb出现adb server is out of date时的解决的方法

    2021年11月29日
  • R-L模型算法的优缺点_审计重要性特征

    R-L模型算法的优缺点_审计重要性特征1.特征重要性的意义LR模型也就是逻辑回归模型,作为一个简单的常用的模型,其有非常多的有点,除了模型简单,容易实现分布式,还有一个重要的优点就是模型的可解释性非常好。因为每个特征都对应一个模型参数wiw_{i}wi​,该参数越大,那么该特征对模型预测结果的影响就会越大,我们就说该特征就越重要,因此LR模型的特征重要性评估方式就是wiw_{i}wi​的大小。2.逻辑回归模型特征重要性及排序Ta…

  • css经典布局——双飞翼布局

    圣杯布局的出现是来自由MatthewLevine在2006年写的一篇文章《InSearchoftheHolyGrail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局。圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。主要的不同之处就是在解决中间部分…

  • 循环单链表解决约瑟夫环_用链表解决约瑟夫环问题

    循环单链表解决约瑟夫环_用链表解决约瑟夫环问题已知有5个人围坐在一张圆桌的周围,从编号为3的人开始顺时针数数,数到2的那个人出列淘汰,然后从出列的下个一人继续数,依次循环,直到只剩下最后一个人。(使用循环链表实现约瑟夫环)代码如下:#include “pch.h”#include<string>#include<fstream>#include<Windows.h>#include <i…

  • 亲身经历从软通外包到华为OD,两者有什么区别?「建议收藏」

    亲身经历从软通外包到华为OD,两者有什么区别?「建议收藏」亲身经历从软通外包到华为OD,两者有什么区别?声明:本人所有言论仅限2021-04当前真实所在的部门情况。序言​ 坐标南京,本人2014年毕业于211本科院校,16年底加入软通动力,20年初转入华为OD。到如今算是经历了完整的OD模式。从被华为沟通加入OD,尝试第一次了解它的时候开始,网评就在外包/OD/自有三者之间疯狂比较。那本文就从外包/OD到底有什么区别?OD离自有有多远?来说说在如今华为社招基本停工的局面下,该如何面对华为这个ICT巨兽的招聘?希望对有些迷茫的人提供一些帮助。网上的声音有很多,

  • word在试图打开文件时遇到错误,一种解决办法[通俗易懂]

    word在试图打开文件时遇到错误,一种解决办法[通俗易懂]1.双击word打开时弹出错误窗口弹出错误,无法打开word;2.解决办法此时右键打开word的属性窗口:选择下面的解除锁定,点击;锁定解除后,就可以正常打开word进行查看了。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号