jQuery是目前最廣泛使用的JavaScript庫之一,它為我們提供了很多方便的操作方式,比如在頁面中使用jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能。
$(function(){ var endTime = new Date("2022/01/01 00:00:00").getTime(); //設(shè)置截止時(shí)間為2022年1月1日0時(shí)0分0秒 var nowTime = new Date().getTime(); //獲取當(dāng)前時(shí)間 var timeLeft = endTime - nowTime; //計(jì)算剩余時(shí)間的毫秒數(shù) //設(shè)置倒計(jì)時(shí)定時(shí)器,每秒執(zhí)行一次 var timer = setInterval(function(){ timeLeft -= 1000; //每次減去1000毫秒 var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); //計(jì)算剩余天數(shù) var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //計(jì)算剩余小時(shí)數(shù) var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); //計(jì)算剩余分鐘數(shù) var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); //計(jì)算剩余秒數(shù) //將倒計(jì)時(shí)顯示在頁面上 $("#timeLeft").html(days + "天" + hours + "小時(shí)" + minutes + "分" + seconds + "秒"); //如果倒計(jì)時(shí)結(jié)束,清除定時(shí)器 if (timeLeft <= 0) { clearInterval(timer); $("#timeLeft").html("倒計(jì)時(shí)結(jié)束!"); } }, 1000); });
在上述代碼中,我們首先獲取了截止時(shí)間和當(dāng)前時(shí)間,并計(jì)算出了剩余時(shí)間的毫秒數(shù)。然后我們使用了setInterval()方法設(shè)置了每秒執(zhí)行一次的定時(shí)器,在定時(shí)器中計(jì)算出剩余的天數(shù)、小時(shí)數(shù)、分鐘數(shù)和秒數(shù),并將其顯示在頁面上。如果倒計(jì)時(shí)結(jié)束,我們就清除定時(shí)器,并將“倒計(jì)時(shí)結(jié)束!”顯示在頁面上。
下一篇css彈窗漸隱漸出