一个简单的2024龙年倒计时页面html源码

预览如下
在这里插入图片描述

复制粘贴下面的代码，另存为html文件即可打开，文字链接都可以更改：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2024新年倒计时</title>
<style>::-webkit-scrollbar { display: none;}</style>
<style>
home.php?mod=space&uid=476974 url("https://fonts.googleapis.com/css?family=Aleo");:root {font-family: "Aleo", sans-serif;
}html,
body {width: 100%;height: 100%;padding: 0;margin: 0;background: rgb(119, 13, 13);background: radial-gradient(circle,rgba(119, 13, 13, 0.92) 64%,rgba(0, 0, 0, 0.6) 100%);
}canvas {width: 100%;height: 100%;
}.label {font-size: 2.2rem;background: url("https://blog.azad.asia/2024/img/01.png");background-clip: text;-webkit-background-clip: text;color: transparent;animation: moveBg 30s linear infinite;
}@keyframes moveBg {0% {background-position: 0% 30%;}100% {background-position: 1000% 500%;}
}.middle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;user-select: none;
}.time {color: #d99c3b;text-transform: uppercase;display: flex;justify-content: center;
}.time span {padding: 0 14px;font-size: 0.8rem;
}.time span div {font-size: 3rem;
}home.php?mod=space&uid=945662 (max-width: 740px) {.label {font-size: 1.7rem;}.time span {padding: 0 16px;font-size: 0.6rem;}.time span div {font-size: 2rem;}
}
</style>
<!--适配小屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body>
<script language="javascript" type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("新的一年，祝各位坛友", "时来运转","如愿以偿","出门见喜","万事胜意","一夜暴富","元气满满","平安喜乐","乘风破浪","生活明朗","知足常乐","福如东海", "寿比南山", "财源滚滚", "喜气洋洋", "好运连连","步步高升", "蒸蒸日上","闪闪发光","欣欣向荣","生生不息","心想事成" ,"幸福安康","健康快乐", "笑口常开", "龙马精神", "福星高照","财运亨通","吉祥如意","美梦成真","锦鲤附体","喜气盈门","家肥屋润","家和万事兴","所得皆所期","所求皆如愿","所行化坦途");var $i = $("<span/>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#eea2a4"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});
});
</script><div class="middle"><h1 class="label">距農曆2024甲辰龍年 </h1><div class="time"><span><div id="d">00</div>天 </span> <span><div id="h">00</div>時 </span> <span><div id="m">00</div>分 </span> <span><div id="s">00</div>秒 </span></div>
</div><script>
class Snowflake {constructor() {this.x = 0;this.y = 0;this.vx = 0;this.vy = 0;this.radius = 0;this.alpha = 0;this.reset();}reset() {this.x = this.randBetween(0, window.innerWidth);this.y = this.randBetween(0, -window.innerHeight);this.vx = this.randBetween(-3, 3);this.vy = this.randBetween(2, 5);this.radius = this.randBetween(1, 4);this.alpha = this.randBetween(0.1, 0.9);}randBetween(min, max) {return min + Math.random() * (max - min);}update() {this.x += this.vx;this.y += this.vy;if (this.y + this.radius > window.innerHeight) {this.reset();}}
}class Snow {constructor() {this.canvas = document.createElement("canvas");this.ctx = this.canvas.getContext("2d");document.body.appendChild(this.canvas);window.addEventListener("resize", () => this.onResize());this.onResize();this.updateBound = this.update.bind(this);requestAnimationFrame(this.updateBound);this.createSnowflakes();}onResize() {this.width = window.innerWidth;this.height = window.innerHeight;this.canvas.width = this.width;this.canvas.height = this.height;}createSnowflakes() {const flakes = window.innerWidth / 4;this.snowflakes = [];for (let s = 0; s < flakes; s++) {this.snowflakes.push(new Snowflake());}}update() {this.ctx.clearRect(0, 0, this.width, this.height);for (let flake of this.snowflakes) {flake.update();this.ctx.save();this.ctx.fillStyle = "#FFF";this.ctx.beginPath();this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);this.ctx.closePath();this.ctx.globalAlpha = flake.alpha;this.ctx.fill();this.ctx.restore();}requestAnimationFrame(this.updateBound);}
}new Snow();//更多前往QQ沐编程// Simple CountDown Clockconst comingdate = new Date("Feb 10, 2024 00:00:00");const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");const countdown = setInterval(() => {const now   = new Date();const des   = comingdate.getTime() - now.getTime();const days  = Math.floor(des / (1000 * 60 * 60 * 24));const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const mins  = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));const secs  = Math.floor((des % (1000 * 60)) / 1000);d.innerHTML = getTrueNumber(days);h.innerHTML = getTrueNumber(hours);m.innerHTML = getTrueNumber(mins);s.innerHTML = getTrueNumber(secs);if (x <= 0) clearInterval(x);
}, 1000);const getTrueNumber = x => (x < 10 ? "0" + x : x);
</script><style>
.deng-box1 {position: fixed;top: -30px;left: 5px;z-index: 9999;pointer-events: none;
}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}.deng::before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: #ffa500;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;
}.deng-box1 {pointer-events: none;
}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: 12px 8px 8px 10px;border-radius: 50% 50%;border: 2px solid #dc8f03;
}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: -2px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;
}.deng-t {font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size: 1.5rem;color: #ffa500;font-weight: bold;line-height: 42px;text-align: center;width: 25px;margin: 0 auto;
}.shui-a {position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: #ffa500;border-radius: 0 0 5px 5px;
}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: #ffa500;border-radius: 0 0 0 5px;
}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%;
}.deng::after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: " ";display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: #ffa500;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}.deng-box2 {position: fixed;top: -30px;right: 5px;z-index: 9999;pointer-events: none;
}.deng-box2 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box2 {pointer-events: none;
}@-moz-keyframes swing {0% {-moz-transform: rotate(-10deg)}50% {-moz-transform: rotate(10deg)}100% {-moz-transform: rotate(-10deg)}
}@-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg)}50% {-webkit-transform: rotate(10deg)}100% {-webkit-transform: rotate(-10deg)}
}
</style>
<div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">辞旧</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
<div class="deng-box2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">迎新</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div><div style="text-align:center;width:90%;left:5%;bottom:10px;position:fixed;"><font size="1"><span style="color:gray">Copyright ? 2023-2024</span>   <a href="http://www.qqmu.com" target="_blank" style="text-decoration: none; color:gray" >QQ沐编程</a></font>
</div>
</body>
</html>