您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么使用HTML、css、javascript創(chuàng)建倒計(jì)時(shí)效果,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
實(shí)現(xiàn)倒計(jì)時(shí)效果的代碼如下:
<!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年春節(jié)還有:</h2> <hr> <p id="demo" style="font-size:30px"></p> </div> <div class="bottomleft"> <p>www.php.cn</p> </div> </div> <script> // 設(shè)定我們倒計(jì)時(shí)的日期 var countDownDate = new Date("2022,2,1").getTime(); // 每1秒更新一次計(jì)數(shù) var countdownfunction = setInterval(function() { // 獲取今天的日期和時(shí)間 var now = new Date().getTime(); // 找出現(xiàn)在與倒數(shù)日期之間的差 var distance = countDownDate - now; // 時(shí)間計(jì)算為天,小時(shí),分和秒 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"的元素中輸出結(jié)果 document.getElementById("demo").innerHTML = days + "天" + hours + "時(shí)" + minutes + "分" + seconds + "秒"; // 如果倒計(jì)時(shí)結(jié)束了,寫(xiě)一些文字 if (distance < 0) { clearInterval(countdownfunction); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> </body> </html>
關(guān)于“怎么使用HTML、css、javascript創(chuàng)建倒計(jì)時(shí)效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。