效果：
HTML编码：
<!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%3A%2F%2Fwww.ayla.com.cn%2Fassets%2Fblt8947f26905c0f94e%2FCSDN.jpg&refer=http%3A%2F%2Fwww.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>
希望能给大家带来一定的欢乐，谢谢,新年快乐。