2022跨年代码(HTML·资源都是网上的可以直接使用)
生活随笔
收集整理的這篇文章主要介紹了
2022跨年代码(HTML·资源都是网上的可以直接使用)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果：
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); // 添加計(jì)時(shí)器}function time(obj, futimg) {var nowtime = new Date().getTime(); // 現(xiàn)在時(shí)間轉(zhuǎn)換為時(shí)間戳var futruetime = new Date(futimg).getTime(); // 未來時(shí)間轉(zhuǎn)換為時(shí)間戳var msec = futruetime - nowtime; // 毫秒 未來時(shí)間-現(xiàn)在時(shí)間var time = (msec / 1000); // 毫秒/1000var day = parseInt(time / 86400); // 天 24*60*60*1000var hour = parseInt(time / 3600) - 24 * day; // 小時(shí) 60*60 總小時(shí)數(shù)-過去的小時(shí)數(shù)=現(xiàn)在的小時(shí)數(shù)var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒為一整份 取余 剩下秒數(shù) 秒數(shù)/60 就是分鐘數(shù)var second = parseInt(time % 60); // 以60秒為一整份 取余 剩下秒數(shù)obj.innerHTML = "<br>距離2022年還有：<br>" + day + "天" + hour + "小時(shí)" + 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>?希望能給大家?guī)硪欢ǖ臍g樂，謝謝,新年快樂。
總結(jié)
以上是生活随笔為你收集整理的2022跨年代码(HTML·资源都是网上的可以直接使用)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【蓝桥杯Java_C组·从零开始卷】第三
- 下一篇： 粉色温馨——HTML框架示例