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

4199229

第一种效果演示

在线体验
图片[1]-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>

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

如何免费搭建一款个人图床网站-FancyPig's blog
如何免费搭建一款个人图床网站-FancyPig's blog
如何免费搭建一款个人图床网站
Adil的头像-FancyPig's blog汉堡会员10个月前
3265725

第二种效果演示

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

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

源码

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

猪头网盘 密码：0k4xof

源码更改

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

第三种效果演示

在线体验
图片[3]-2022年五种HTML网页的美观春节倒计时 附源码与修改教程-FancyPig's blog

源码

<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>
<!--倒计时结束-->

源码更改

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

第四种效果演示

在线体验
图片[4]-2022年五种HTML网页的美观春节倒计时 附源码与修改教程-FancyPig's blog

源码

<!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，把源码复制上去就行。

第五种效果演示

在线体验
图片[5]-2022年五种HTML网页的美观春节倒计时 附源码与修改教程-FancyPig's blog

源码

<!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# 网页# 新年倒计时源码# 网站倒计时源码# 过年倒计时# 过年倒计时源码# 新年倒计时文案
喜欢就支持一下吧
点赞29 分享
Xiaonuo的头像-FancyPig's blog汉堡会员
如何获取免费谷歌团队云盘？给自己一个无限空间的本地网盘！-FancyPig's blog
如何获取免费谷歌团队云盘？给自己一个无限空间的本地网盘！
如何获取免费谷歌团队云盘？给自己一个无限空间的本地网盘！
7个月前 7010
NtrQQ「7.1.2」QQ显IP增强插件安装方法-FancyPig's blog
NtrQQ「7.1.2」QQ显IP增强插件安装方法
NtrQQ「7.1.2」QQ显IP增强插件安装方法
11个月前 6745
最简单的方法破解阿里云盘分享文件数量、下载和两分钟试看限制！-FancyPig's blog
最简单的方法破解阿里云盘分享文件数量、下载和两分钟试看限制！
最简单的方法破解阿里云盘分享文件数量、下载和两分钟试看限制！
7个月前 6211
99%的人都不知道的钓鱼🎣小技巧，别人一般不会告诉你-FancyPig's blog
99%的人都不知道的钓鱼🎣小技巧，别人一般不会告诉你
99%的人都不知道的钓鱼🎣小技巧，别人一般不会告诉你
45天前 4305
实名二要素介绍及一次简单的实践 附PHP源码-FancyPig's blog
实名二要素介绍及一次简单的实践 附PHP源码
实名二要素介绍及一次简单的实践 附PHP源码
6个月前 3064
Typora 1.0.2(破解版) – Markdown编辑器-FancyPig's blog
Typora 1.0.2(破解版) – Markdown编辑器
Typora 1.0.2(破解版) – Markdown编辑器
7个月前 2309
相关推荐
评论 共4条

请登录后发表评论

    只看作者
    • Xiaonuo的头像-FancyPig's blog汉堡会员XiaonuoLV10作者1
      其实还有第六种春节虎年倒计时的引流页面 这是最高级的一种，界面炫酷，手机和电脑分别页面 预览、使用教程与下载链接：https://pan.iculture.cc/s/omPhg 这个还是不要评论了，怕看不见
      7个月前
    • Xiaonuo的头像-FancyPig's blog汉堡会员XiaonuoLV10作者2
      第四种的体验链接：https://xiaonuo2.github.io/xinnian/xinnian2/ 我的GitHub带不动，上传到自己的服务器就不会卡了表情[qiaoda]-FancyPig's blog
      7个月前
本文作者
用户封面
Xiaonuo的头像-FancyPig's blog汉堡会员
99%的人都不知道的钓鱼🎣小技巧，别人一般不会告诉你
基于Cloudflare搭建自己的GitHub加速站 一步解决GitHub访问问题！
如何利用Checkra1n绕过 iCloud 锁 | iPhone 5s 到 X |
实名二要素介绍及一次简单的实践 附PHP源码
最简单的方法破解阿里云盘分享文件数量、下载和两分钟试看限制！
如何获取免费谷歌团队云盘？给自己一个无限空间的本地网盘！
标签云
burpsuite渗透测试渗透网络安全APP素材软件python渗透教程burpsuite是什么工具产品运营kali小云课堂漏洞社工黑客burpsuite下载安装burpsuite下载nessusburpsuite爆破密码burpsuite破解版安装教程burpsuite安装详细教程钓鱼信息安全qqpostburpsuite使用教程burpsuite专业版破解小云教程linuxdvwa远程控制源码远控社工库sql注入王者荣耀burpsuite破解版下载UI图标httpsburpsuite专业版域名burpsuite破解版nessus插件下载burpsuite破解教程nessus插件更新DNSwireshark在线社工库暴力破解xssnessus插件下载失败burpsuite下载最新破解版产品测评产品分析内容运营discuz插件mysqldvwa实验ctfgoogle定位awvsburpnessus工具的作用零基础服务器数据库抓包web安全metasploitburpsuite破解keynessus扫描教程nessus插件被清空discuz微信环境配置爆破密码php破解