欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

2022跨年代码(HTML·资源都是网上的可以直接使用)

发布时间:2024/8/26 HTML 61 豆豆
生活随笔 收集整理的这篇文章主要介绍了 2022跨年代码(HTML·资源都是网上的可以直接使用) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

效果:

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); // 毫秒/1000var day = parseInt(time / 86400); // 天 24*60*60*1000var 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>

 希望能给大家带来一定的欢乐,谢谢,新年快乐。

总结

以上是生活随笔为你收集整理的2022跨年代码(HTML·资源都是网上的可以直接使用)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。