2022年五种HTML网页的美观春节倒计时附源码与修改教程-FancyPig's blog

第一种效果演示

源码

<html>
 <head></head>
 <body>
  <div> 
   <h1><font color="ff0000"></font>
    <div class="text" style=" text-align:center;">
     <font color="ff0000"><img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/denglong.gif" alt="灯笼" title="灯笼" />春节倒计时<img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/denglong.gif" alt="灯笼" title="灯笼" /></font>
    </div></h1> 
   <h3 id="title-1">
    <div class="text" style=" text-align:center;">
     2022年春节时间：2022年2月1日 星期二 农历正月初一
     <img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/meigui.png" alt="玫瑰" title="玫瑰" />
    </div></h3> 
   <h3 id="title-2">
    <div class="text" style=" text-align:center;">
     <img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/taiyang.png" alt="太阳" title="太阳" />距离2022年春节过年还有
     <img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/89.png" alt="网站春节倒计时代码分享" />
    </div></h3> 
   <div>
    <div class="text" style=" text-align:center;"> 
     <span id="t_d">00</span> 
     <span id="t_h">00</span> 
     <span id="t_m">00</span> 
     <span id="t_s">00</span> 
    </div> 
    <script type="text/javascript">
function getRTime(){
var EndTime= new Date('2022/02/1 00:00:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime,1000);
</script>
   </div>
  </div>
 </body>
</html>

如果想把它上传至服务器，建一个文件夹，里面新建文件index.html，把源码复制上去就行。

或者不用一个单独的HTML页面，直接插入也可以。

HTML直接插入代码

<div>
<h1><font color="ff0000"></font><div class="text" style=" text-align:center;"><font color="ff0000"><img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/denglong.gif" alt="网站春节倒计时代码分享" title="灯笼" alt="灯笼">春节倒计时<img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/denglong.gif" alt="网站春节倒计时代码分享" title="灯笼" alt="灯笼"></font></div></h1>
<h3 id="title-1"><div class="text" style=" text-align:center;">2022年春节时间：2022年2月1日 星期二 农历正月初一<img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/meigui.png" alt="网站春节倒计时代码分享" title="玫瑰" alt="玫瑰"></div></h3>
<h3 id="title-2"><div class="text" style=" text-align:center;"><img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/taiyang.png" alt="网站春节倒计时代码分享" title="太阳" alt="太阳">距离2022年春节过年还有<img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/89.png" alt="网站春节倒计时代码分享"></div></h3>
<div><div class="text" style=" text-align:center;">
<span id="t_d">00</span>
<span id="t_h">00</span>
<span id="t_m">00</span>
<span id="t_s">00</span>
</div>
<script type="text/javascript">
function getRTime(){
var EndTime= new Date('2022/02/1 00:00:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime,1000);
</script>

源码更改

等到明年新年到了，修改第十一、二十八行或可插入的第三、十三行，分别修改春节时间和截止时间。

如果想改图片的话，可以改一下代码：

  <div> 
   <h1><font color="ff0000"></font>
    <div class="text" style=" text-align:center;">
     <font color="ff0000"><img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/denglong.gif" alt="灯笼" title="灯笼" />春节倒计时<img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/denglong.gif" alt="灯笼" title="灯笼" /></font>
    </div></h1> 
   <h3 id="title-1">
    <div class="text" style=" text-align:center;">
     2022年春节时间：2022年2月1日 星期二 农历正月初一
     <img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/meigui.png" alt="玫瑰" title="玫瑰" />
    </div></h3> 
   <h3 id="title-2">
    <div class="text" style=" text-align:center;">
     <img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/taiyang.png" alt="太阳" title="太阳" />距离2022年春节过年还有
     <img class="wp-smiley" src="https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/89.png" alt="网站春节倒计时代码分享" />
    </div></h3> 
   <div>

这里大家应该都能看出来图床图片地址在哪里，修改成你的图床图片就行了！

如何免费搭建一款个人图床网站

3个月前

4118729

第二种效果演示

这是别人的效果演示，由于我没钱买服务器，用的是GitHub的托管，而GitHub很多不支持，所以动态的不能显示。

源码

已经打包好，上传至服务器使用就可以。

猪头网盘密码：0k4xof

源码更改

等到明年新年到了，修改JS/app.js文件第21行时间就可以了，其它的一些个人推广在index.html文件中也可以修改，我还加上了本机IP显示与个人推广，自己修改就可以。

第三种效果演示

在线体验

源码

<html>
 <head>
  <style>
/* 倒计时开始 */
.gn_box {
padding: 10px 14px;
margin-bottom: 20px;
text-align: center;
background-color: #fff;
}
#t_d{
color: #982585;
font-size: 18px;
}
#t_h{
color: #8f79c1;
font-size: 18px;
}
#t_m{
color: #65b4b5;
font-size: 18px;
}
#t_s{
color: #83caa3;
font-size: 18px;
}
</style> 
  <!--倒计时开始--> 
 </head>
 <body>
  <div class="gn_box"> 
   <h1><font color="#E80017">2</font><font color="#D1002E">0</font><font color="#BA0045">2</font><font color="#A3005C">2</font><font color="#8C0073">年</font><font color="#75008A">-</font><font color="#5E00A1">新</font><font color="#4700B8">年</font><font color="#3000CF">倒</font><font color="#1900E6">计</font><font color="#0200FD">时</font> </h1> 
   <center> 
    <div id="CountMsg" class="HotDate"> 
     <span id="t_d">626 天</span> 
     <span id="t_h">6 时</span> 
     <span id="t_m">26 分</span> 
     <span id="t_s">26 秒</span> 
    </div> 
   </center> 
   <script type="text/javascript"> function getRTime() {
var EndTime = new Date('2022/02/1 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script> 
  </div> 
  <!--倒计时结束-->
 </body>
</html>

同上，如果想把它上传至服务器，建一个文件夹，里面新建文件index.html，把源码复制上去就行。

同上，或者不用一个单独的HTML页面，直接插入也可以。

HTML直接插入代码

<style>
/* 倒计时开始 */
.gn_box {
padding: 10px 14px;
margin-bottom: 20px;
text-align: center;
background-color: #fff;
}
#t_d{
color: #982585;
font-size: 18px;
}
#t_h{
color: #8f79c1;
font-size: 18px;
}
#t_m{
color: #65b4b5;
font-size: 18px;
}
#t_s{
color: #83caa3;
font-size: 18px;
}
</style>
<!--倒计时开始-->
<div class="gn_box">
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>2</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">626 天</span>
<span id="t_h">6 时</span>
<span id="t_m">26 分</span>
<span id="t_s">26 秒</span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2022/02/1 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
<!--倒计时结束-->

源码更改

同样的配方，修改时间就可以了，大家都能看出来的。

第四种效果演示

在线体验

源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title><!-- 这是网页标题 -->
<style>
body{
  overflow: hidden;
  margin: 0;
}
h1{
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 60px;
  color: #c70012;
  padding: 0 20px;
}
h1 span{
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;
margin-top:30px;
    font-size:40px;
}
</style>

</head>
<body>
<h1 id="h1"></h1>
<canvas></canvas> <!--canvas 画布-->

<script>
var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d");

var ww,wh;

function onResize(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
}

ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";

var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){
  mouseMoved = true;
  if(e.type === "touchmove"){
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  }
  else{
    hearts.push(new Heart(e.clientX, e.clientY));
    hearts.push(new Heart(e.clientX, e.clientY));
  }
}

var Heart = function(x,y){
  this.x = x || Math.random()*ww;
  this.y = y || Math.random()*wh;
  this.size = Math.random()*2 + 1;
  this.shadowBlur = Math.random() * 10;
  this.speedX = (Math.random()+0.2-0.6) * 8;
  this.speedY = (Math.random()+0.2-0.6) * 8;
  this.speedSize = Math.random()*0.05 + 0.01;
  this.opacity = 1;
  this.vertices = [];
  for (var i = 0; i < precision; i++) {
    var step = (i / precision - 0.5) * (Math.PI * 2);
    var vector = {
      x : (15 * Math.pow(Math.sin(step), 3)),
      y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
    }
    this.vertices.push(vector);
  }
}

Heart.prototype.draw = function(){
  this.size -= this.speedSize;
  this.x += this.speedX;
  this.y += this.speedY;
  ctx.save();
  ctx.translate(-1000,this.y);
  ctx.scale(this.size, this.size);
  ctx.beginPath();
  for (var i = 0; i < precision; i++) {
    var vector = this.vertices[i];
    ctx.lineTo(vector.x, vector.y);
  }
  ctx.globalAlpha = this.size;
  ctx.shadowBlur = Math.round((3 - this.size) * 10);
  ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  ctx.shadowOffsetX = this.x + 1000;
  ctx.globalCompositeOperation = "screen"
  ctx.closePath();
  ctx.fill()
  ctx.restore();
};


function render(a){
  requestAnimationFrame(render);

  hearts.push(new Heart())
  ctx.clearRect(0,0,ww,wh);
  for (var i = 0; i < hearts.length; i++) {
    hearts[i].draw();
    if(hearts[i].size <= 0){
      hearts.splice(i,1);
      i--;
    }
  }
}


onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);

window.onload=function starttime(){
        time(h1,'2022/2/1');     // 2022年春节时间
        ptimer = setTimeout(starttime,1000); // 添加计时器
}

    function time(obj,futimg){
        var nowtime = new Date().getTime(); // 现在时间转换为时间戳
        var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
        var msec = futruetime-nowtime; // 毫秒 未来时间-现在时间
        var time = (msec/1000);  // 毫秒/1000
        var day = parseInt(time/86400); // 天  24*60*60*1000 
        var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
        var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
        var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
        obj.innerHTML="<br>距离春节还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>愿我所念的人平安喜乐，<br>愿我所想的事顺心如意。<br>May the people I think of be safe and happy, <br>and may the things I think of be all right.</span>"
        return true;
    }
</script>
  <audio id="bgmusic" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById('bgmusic');
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                    }, false);
                 }
                 audioAutoPlay();
                 });
</script>
</body>
</html>

这里还有背景音乐。

源码修改

同样的配方，修改时间就行，还有音乐呢，也可以修改，我放的是《星辰大海》。

同上，如果想把它上传至服务器，建一个文件夹，里面新建文件index.html，把源码复制上去就行。

第五种效果演示

在线体验

源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title>
<style>
canvas {
    padding:0;
    margin:0;
}
body{
  overflow: hidden;
  margin: 0;
}
h1{
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 60px;
  color:black;
  padding: 0 20px;
}
h1 span{
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;
margin-top:30px;
    font-size:40px;
    color:black;
}
</style>
</head>
<body>
<h1 id="h1"></h1>
<script>
window.onload=function starttime(){
        time(h1,'2022/2/1');     // 2022年春节时间
        ptimer = setTimeout(starttime,1000); // 添加计时器
}
    function time(obj,futimg){
        var nowtime = new Date().getTime(); // 现在时间转换为时间戳
        var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
        var msec = futruetime-nowtime; // 毫秒 未来时间-现在时间
        var time = (msec/1000);  // 毫秒/1000
        var day = parseInt(time/86400); // 天  24*60*60*1000
        var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数
        var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
        var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
        obj.innerHTML="<br>距离2022年还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>新年快乐</span>"
}
</script>
<audio autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" id="song">
</audio>
</body>
</html>

这里还有背景音乐。

源码修改

同样的配方，修改时间就行，还有音乐呢，也可以修改，我放的是《星辰大海》。

同上，如果想把它上传至服务器，建一个文件夹，里面新建文件index.html，把源码复制上去就行。

附：更改网页背景

上面有几个背景为白色，太单调了，因此放上此文。

文章源地址：传送门

相关声明 1 微信公众号：FancyPig
2 本站永久网址：https://www.iculture.cc
3 本文内容仅为技术科普，请勿用于非法用途
4 本文内容未隐讳任何个人、群体、公司。非文学作品，请勿用于阅读理解的练习
5 根据《计算机软件保护条例》第十七条，本站所有软件请仅用于学习研究用途
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责

THE END

干货分享建站教程
# 源码 # 教程 # html # 新年 # 春节 # 春节倒计时 # 新年倒计时 # 2022年来了 # 2022 # 网页 # 新年倒计时源码 # 网站倒计时源码 # 过年倒计时 # 过年倒计时源码 # 新年倒计时文案

评论共4条

请登录后发表评论

登录注册

只看作者

- 小白1
  挺好，知识领域开始搞技术了
  3个月前回复
- - Xiaonuo作者0
    3个月前@小白回复
- Xiaonuo作者1
  其实还有第六种春节虎年倒计时的引流页面这是最高级的一种，界面炫酷，手机和电脑分别页面预览、使用教程与下载链接：https://pan.iculture.cc/s/omPhg 这个还是不要评论了，怕看不见
  3个月前回复
- Xiaonuo作者2
  第四种的体验链接：https://xiaonuo2.github.io/xinnian/xinnian2/ 我的GitHub带不动，上传到自己的服务器就不会卡了
  3个月前回复

2022年五种HTML网页的美观春节倒计时附源码与修改教程

第一种效果演示

源码

HTML直接插入代码

源码更改

第二种效果演示

源码

源码更改

第三种效果演示

源码

HTML直接插入代码

源码更改

第四种效果演示

源码

源码修改

第五种效果演示

源码

源码修改

附：更改网页背景

网恋照妖镜神器如何避免乔碧萝事件

分享一款简单粗暴的社工库源码

常见搜索引擎Google Hacking语法整理

一行代码教你如何强制加好友并给他打QQ电话

请登录后发表评论

2022年五种HTML网页的美观春节倒计时 附源码与修改教程

第一种效果演示

源码

HTML直接插入代码

源码更改

第二种效果演示

源码

源码更改

第三种效果演示

源码

HTML直接插入代码

源码更改

第四种效果演示

源码

源码修改

第五种效果演示

源码

源码修改

附：更改网页背景

网恋照妖镜神器 如何避免乔碧萝事件

分享一款简单粗暴的社工库源码

常见搜索引擎Google Hacking语法整理

一行代码教你如何强制加好友并给他打QQ电话

请登录后发表评论

2022年五种HTML网页的美观春节倒计时附源码与修改教程

网恋照妖镜神器如何避免乔碧萝事件