网页版春节倒计时特效代码分享
天晴 2022-01-20 290 浏览 0 评论
2022年春节将近,从网上淘到了一个网页版春节倒计时特效代码,具体出处不记得了,在这个即将到来的2022年春节期间可以为个人的网站博客悬挂上该特效,喜迎新春佳节的到来。
演示效果
使用教程
代码通过div+css的方式实现,使用时可直接复制粘贴到个人的网站主题后台广告位即可。对于PHP代码构成的网站程序来说应该大多数是支持的。
特效代码
<div class="card" style="background: url(https://i.loli.net/2021/11/12/A8uPS4zIB1oeiNv.jpg) no-repeat; background-size: cover;"><br> <center><b> <h4><p><span style="color: #ffffff;">2022年-新春倒计时-奇它博客</span></p></h4></b></center> <div class="gn_box"> <center> <div id="CountMsg" class="HotDate text-light"> <span style="color: #ffffff;"><span id="t_d">157 天</span> <span id="t_h">9 时</span> <span id="t_m">7 分</span> <span id="t_s">42 秒</span></span> </div><br> </center><br> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2022/02/01 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> </div><style> .copyright { margin-top: 10px; padding: 10px; background: #5f9ea0; border-radius: 5px; color : #f0ffff; } .copyright .copyright-title { padding: 5px; text-align: center; } .copyright .copyright-title h3 { font-size: 18px; } .copyright .copyright-text { font-size: 15px; line-height: 25px; } .copyright .copyright-url { margin: 5px 0; } </style>
- 已经是第一篇了
- 已经是最后一篇了
相关推荐
-
- 网页版春节倒计时特效代码分享
-
2022年春节将近,从网上淘到了一个网页版春节倒计时特效代码,具体出处不记得了,在这个即将到来的2022年春节期间可以为个人的网站博客悬挂上该特效,喜迎新春佳节...
-
1年前 (2022-01-20) 天晴