效果展示:

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="
viewport" content="width=device-width,initial-scale=1"> <title>倒计时</title> <
style> * { margin: 0; padding: 0; } html, body { height: 100% } body {
background-image: url("newyear.jpg"); background-size: 100% 100%;
background-position: center center; font-size: 28px; font-family: "宋体";
overflow-y: hidden; overflow-y: hidden; } .main { width: 100%; height: 100%;
/*margin: 10% auto;*/ /*border: 1px solid red;*/ } .title { /*background:
#20a53a;*/ color: greenyellow; font-size: 40px; height: 50px; line-height: 50px;
/*padding-left: 20px;*/ text-align: center; } .content { /*background-color:
#f3f7f9;*/ height: calc(100% - 50px); border: 1px dashed #c6d9b6; text-align:
center; } #time { display: block; margin-top: 100px; /*line-height: 900px;*/
font-size: 60px; /*font-size: 100%;*/ vertical-align: middle; color: yellow; }
</style> </head> <body> <div class="main"> <div class="title">2023</div> <div
class="content"> <p id="time">祝大家新年快乐呀!</p> </div> </div> </body> <script>
window.onload = function () { let oTime = document.querySelector('#time') let
Timer= setInterval(function () { let date = new Date() date.getDay() date.
getMonth() date.getFullYear() console.log(date.getFullYear() == 2023) if (date.
getFullYear() == 2023) { oTime.innerHTML = `2023,新年快乐!` clearInterval(Timer)//由
setInterval()返回的ID值可用作clearInterval()方法的参数。 } oTime.innerHTML = ` 距 2023
年还有<br><br>${11 - date.getMonth()}月 ${getMonthDays(date.getFullYear(), date.
getMonth()) - date.getDate()}天 ${23 - date.getHours()}时 ${59 - date.getMinutes()
}分 ${60 - date.getSeconds()}秒`; }, 999) //获取某年某月天数 function getMonthDays(year,
month) { let date = new Date(year, month, 0) return date.getDate(); } } </script
> </html>
<>在下提前祝大家 2023 新年快乐!

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信