چطور تایمر با جاوا اسکریپت بسازم که رفرش نشه؟
سلام عرض ادب من یک تایمر درست کردم با جاوااسکریپت اما اگر صفحه رفرش شه از ابتدا شروع میشه. چندتا راهکار توی اینترنت پیدا کردم اما نتونستم پیاده سازی کنم بعضی هم میگن با جاوا اسکریپت چون سمت کلاینته همچین کاری منطقی نیست. لطفا راهنمایی کنید
<script>
var a =0;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = 0;
clearInterval();
document.write("زمان به پایان رسید. چنانچه لینک دانلود نمایش داده نشد با ما تماس بگیرید");
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
<body>
<div>دریافت فایل تا <span id="time">01:00</span></div>
</body>
نقل قول: چطور تایمر با جاوا اسکریپت بسازم که رفرش نشه؟
میتونید در هر تیک اطلاعات رو در localStorage ذخیره کنی که کار به صرفه ای نیست و یا میتوایند قبل از خروج کاربر از صفحه اطلاعات رو ذخیره کنید
window.onbeforeunload = function() {
return "Are you sure , You want to leave?";
}
تابع بالا قبل از خروج کاربر از صفحه فراخوانی میشود
نقل قول: چطور تایمر با جاوا اسکریپت بسازم که رفرش نشه؟
نقل قول:
نوشته شده توسط
SCoder
میتونید در هر تیک اطلاعات رو در localStorage ذخیره کنی که کار به صرفه ای نیست و یا میتوایند قبل از خروج کاربر از صفحه اطلاعات رو ذخیره کنید
window.onbeforeunload = function() {
return "Are you sure , You want to leave?";
}
تابع بالا قبل از خروج کاربر از صفحه فراخوانی میشود
من توی لوکال استوریج ذخیره کردم اما هنوز موفق نشدم درستش کنم
<script type="text/javascript">
if (localStorage.getItem("counter31")) {
if (localStorage.getItem("counter32") < 1) {
var value = "چنانچه سفارش بدست شما نرسیده با پشتیبانی تماس بگیرید";
localStorage.removeItem('counter31');
localStorage.removeItem('counter32')
} else {
var value = localStorage.getItem("counter31");
var value2 = localStorage.getItem("counter32");
document.getElementById('divCounter').innerHTML = value;
}
} else {
var value = 60;
var value2 = 20;
}
var counter = function () {
if (value2 < 1) {
value = "چنانچه سفارش بدست شما نرسیده با پشتیبانی تماس بگیرید";
localStorage.removeItem('counter31');
localStorage.removeItem('counter32');
clearInterval(interval);
} else if(value<1) {
value=60;
value2 = parseInt(value) - 1;
}
else
{
value = parseInt(value) - 1;
localStorage.setItem("counter31", value);
localStorage.setItem("counter32", value2);
}
}
document.getElementById('divCounter').innerHTML =value2 + ":" + value ;
};
var interval = setInterval(function () { counter(); }, 1000);
</script>
نقل قول: چطور تایمر با جاوا اسکریپت بسازم که رفرش نشه؟
به این شکل درستش کردم بالاخره... توی لوکال استوریج که ذخیره میکنی باعث میشه اگر شخص صفحه رو بست و فردا بازش کرد دوباره ادامش بیاد اما اینجوری بهتره که زمان فعلی رو بگیره و بر مبنای اون تایمر ایجاد شه
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 30px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var countDownDate = new Date();
var v = new Date();
if (localStorage.getItem("p"))
{
var t= new Date(localStorage.getItem("p"));
countDownDate=t;
}
else
{
countDownDate.setMinutes(v.getMinutes()+20);
localStorage.setItem("p", countDownDate);
}
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// var countDownDate2=localStorage.getItem("p");
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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 = minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "تمام شد";
localStorage.removeItem('p');
}
}, 1000);
</script>
</body>
</html>
گذاشتم که سایرین هم بهره مند بشن البته با استفاده از نمونه های w3 school نوشتمش
