第一种效果演示
![图片[1]-2022年简易可插入HTML网页的春节倒计时 附源码与修改教程-FancyPig's blog](https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/20220128182638.png)
源码
<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>
这里大家应该都能看出来图床图片地址在哪里,修改成你的图床图片就行了!
第二种效果演示
这是别人的效果演示,由于我没钱买服务器,用的是GitHub的托管,而GitHub很多不支持,所以动态的不能显示。
![图片[2]-2022年五种HTML网页的美观春节倒计时 附源码与修改教程-FancyPig's blog](https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/20220129110319.png)
源码
已经打包好,上传至服务器使用就可以。
源码更改
等到明年新年到了,修改JS/app.js文件第21行时间就可以了,其它的一些个人推广在index.html文件中也可以修改,我还加上了本机IP显示与个人推广,自己修改就可以。
第三种效果演示
![图片[3]-2022年五种HTML网页的美观春节倒计时 附源码与修改教程-FancyPig's blog](https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/20220129111331.png)
源码
<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](https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/20220129112852.png)
源码
<!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](https://cdn.jsdelivr.net/gh/xiaonuo2/blog-img/20220129113714.png)
源码
<!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,把源码复制上去就行。
附:更改网页背景
上面有几个背景为白色,太单调了,因此放上此文。
文章源地址:传送门
© 版权声明
THE END
- 最新
- 最热
只看作者