您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关怎么使用HTML、css、javascript创建倒计时效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
实现倒计时效果的代码如下:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style> body, html { height: 100%; margin: 0; } .bgimg { background-image: url('003.jpg'); height: 100%; width:100%; background-position: center; background-size: cover; position: relative; color: white; font-family: "Courier New", Courier, monospace; font-size: 25px; } .topleft { background-image: url('logo.png'); position: absolute; width:100%; height:100%; background-repeat: no-repeat; top: 2px; left: 16px; } .bottomleft { position: absolute; bottom: 0; left: 16px; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } hr { margin: auto; width: 40%; } </style> </head> <body> <div class="bgimg"> <div class="topleft"> <div id="color-overlay"></div> </div> <div class="middle"> <h2>距离2022年春节还有:</h2> <hr> <p id="demo" style="font-size:30px"></p> </div> <div class="bottomleft"> <p>www.php.cn</p> </div> </div> <script> // 设定我们倒计时的日期 var countDownDate = new Date("2022,2,1").getTime(); // 每1秒更新一次计数 var countdownfunction = setInterval(function() { // 获取今天的日期和时间 var now = new Date().getTime(); // 找出现在与倒数日期之间的差 var distance = countDownDate - now; // 时间计算为天,小时,分和秒 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 在id="demo"的元素中输出结果 document.getElementById("demo").innerHTML = days + "天" + hours + "时" + minutes + "分" + seconds + "秒"; // 如果倒计时结束了,写一些文字 if (distance < 0) { clearInterval(countdownfunction); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> </body> </html>
关于“怎么使用HTML、css、javascript创建倒计时效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。