我正在使用 jQuery 計時器。當計時器到期時00d 00h 00m 00d,計時器到期并且彈出視窗即將到來,它們都可以正常作業。問題是計時器已過期,但是當重新加載頁面彈出視窗時再次顯示。我可以把定時器放在印度標準時間。我要求您在您的代碼片段中檢查它以清楚地理解問題。
下面是我的代碼:
// Set the date we're counting down to
var countDownDate = new Date("feb 16, 2022 24:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days "d " hours "h "
minutes "m " seconds "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
$("#timer").remove();
$("#modalContent").addClass("show");
}
$("#close").click(function(){
$("#modalContent").removeClass("show");
});
}, 1000);
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
.show
{
display: block !important;
}
.modal-content {
display: none;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myModal" class="modal">
<div id="timer">
<p id="demo"></p>
</div>
<div class="modal-content" id="modalContent">
<span class="close" id="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
uj5u.com熱心網友回復:
從邏輯上講,您的代碼非常正確。只需要檢查以下任一條件:
- 如果您知道需要向訪問您網站的每個用戶顯示彈出視窗多長時間,然后檢查特定日期的條件,如果沒有結束則顯示模態,否則不顯示模態。(首選方式)
- 如果您直接想關閉彈出視窗而不檢查彈出視窗的過期日期,則將標志添??加到 localStorage 并且每次頁面加載時,首先檢查 localStorage 中的標志,然后為其應用條件。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/425075.html
標籤:javascript jQuery 计时器
