效果：
HTML编码：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title>
<style>
canvas {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
margin: 0;
background-image: url('https://gimg2.baidu.com/image_search/src=http://www.ayla.com.cn/assets/blt8947f26905c0f94e/CSDN.jpg&refer=http://www.ayla.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643517927&t=77c836c02ff00e1906d2c826b82c85e8');
background-repeat: no-repeat;
background-size: 70%;
background-position-x: 50%;
}
h1 {
position: fixed;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-family: '行楷', cursive;
font-size: 60px;
color: black;
padding: 0 20px;
}
h1 span {
position: fixed;
left: 0;
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 5rem;
color: red;
}
</style>
</head>
<body>
<h1 id="h1"></h1>
<script>
window.onload = function starttime() {
time(h1, '2022/1/1');
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>希望能给大家带来一定的欢乐，谢谢,新年快乐。
