ایجاد تایمر معکوس با استفاده از زمان سرور(Server Timer)

۵ سال پیش(به روز شده در ۵ سال پیش) جاوا اسکریپت(JS) ۸

با استفاده از تکه کد زیر به راحتی می توانید در وب سایت خود تایمر معکوس قرار دهید. از مزیتهای این تایمر , استفاده از زمان کنونی سرور است چرا که اگر مبنای ساعت یا زمان را از سیستم کاربر در نظر بگیریم بسیاری از کاربران ممکن است ساعت سیستم آنها بروز نباشد و نمایش تایمر بی اعتبار خواهد نمود اما با استفاده از زمان سرور , نمایش تایمر در تمامی سیستمهای کاربران یکسان خواهد بود.

<?php
date_default_timezone_set('Asia/Tehran'); 
 
$now       = time();
$date      = "2020-6-21 10:10:10 am";
$exp_date  = strtotime($date); 
?>
<em>End: <?php echo $date; ?></em>
<div id="countdown">...</div>
<script type="text/javascript">
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'End!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    var countdown = document.getElementById('countdown');
    countdown.innerHTML = '';
    if (days) {
        countdown.innerHTML += days + ' Days, ';
    }
    
    countdown.innerHTML += hours+ ' Hours, ';
    countdown.innerHTML += minutes+ ' Minutes, ';

    if(seconds<10) {
        countdown.innerHTML += '0' + seconds+ ' Seconds';
    }
    else {
        countdown.innerHTML += seconds+ ' Seconds';
    }
}

timer = setInterval(showRemaining, 1000);
</script>

برچسبها

هیچ برچسبی موجود نیست.

صفحات پیشنهادی

نمایش عددی محل نشانگر ماوس در جاوا اسکریپت - JavaScript Example of Mouse Position Tracking...

با حرکت نشانگر ماوس ، موقعیت مکانی آن در واحد X و Y درون تکست باکسها قرار داده می شود......

زمان یونیکس در جاوا اسکریپت...

ساعت یونیکس (به انگلیسی: Unix Time) یا ساعت پوزیکس (به انگلیسی: Posix Time) یکی از مقیاس اندازه‌گیری زمان آنی است. این عدد که تعداد ثانیه‌ها از ساعت ۰۰:۰۰:۰۰ ساعت هماهنگ جهانی اول ژانویه ۱۹۷۰ است......

پیغام تایید یا confirm در جاوااسکریپت...

گاهی نیاز است تا در جاوا اسکریپت برای انجام عملی , از کاربر نسبت به تایید آن سوال شود. یکی از ساده ترین روشها استفاده از تابع confirm می باشد. یعنی متن خود را در ورودی تابع وارد نموده و سپس در صورتی ک...

تابع Replace All در جاوا اسکریپت...

در جاوا اسکریپت امکان جایگزینی یک کاراکتر(کلمه , رشته) در رشته دیگر وجود دارد اما برای همه ی کاراکترها نه. یعنی ما در js تابعی نداریم تا تمامی کاراکترها یا کلمات مد نظرمان در آن رشته را با رشته دیگری ...

8 نظر

gravatar  پدرام
۴ سال پیش - بررسی شده - نوشته شده توسط مهمان

سلام ممنون بابت کد
میشه بگید چطوری از کد استفاده کنیم؟
من تمام این کدها رو در یک صفحه ی php کپی کردم و توی هاست آپلود کردم ولی هیچ چیزی نیاورد تو صفحه البته فقط این رو نشون داد:
End: 2020-6-21 10:10:10 am
...
ممنون میشم بگید چطوری تاریخ هدف رو تغییر بدم که مثلا فلان روز مانده تا فلان تاریخ
باز هم ممنون

gravatar  پدرام
۴ سال پیش - بررسی شده - نوشته شده توسط مهمان

آقا سپاسگزارم مشکل حل شد هم کامل نشون داد هم تاریخش رو تونستم عوض کنم

admin
۴ سال پیش - نوشته شده توسط مدیر

سلام
کد دوباره جهت صحت چک شد و مشکلی نداشت. خوشحالیم که مشکلتون حل شد.

gravatar  میثم
۳ سال پیش - بررسی شده - نوشته شده توسط مهمان

سلام
من کد را گذاشتم و کار کرد
حالا میخواهم زمان را بین ۲ نوشته نشان بدم کجای کد و به چه صورت باید گذشته شود ؟
و اینکه همونجا که کد را وارد کردم هم نشان داده نشود .
ممنون

gravatar  میثم
۳ سال پیش - بررسی شده - نوشته شده توسط مهمان

البته بعد از اون هم میخواستم که زمان تمام میشه که end رو نشان میده دوباره بعد از ۳۰ دقیقه از نو شروع به کار کردن بکند
ممنون

admin
۳ سال پیش - نوشته شده توسط مدیر

س. دوست عزیز شما باید برای نمایش بین دو تاریه از متغیرهای now$ و date$ را تغییر دهید که اولی مربوط به شروع و دومی تاریخ پایان است و در پایان زمانی که تاریخ به اتمام برسد متن End! نمایش داده میشود.

gravatar  میثم
۳ سال پیش - بررسی شده - نوشته شده توسط مهمان

و اگه بخوام دوباره بعد ی مدت زمانی رست بشه و کار کنه چطور ؟

admin
۳ سال پیش - نوشته شده توسط مدیر

برای این مورد نیاز به کد نویسی داره. برای این مورد باید بررسی کنید زمانی که به وقت انتها رسید تابعی را فراخوانی کند تا تاریخها ریست و دوباره کد شروع بکار کنه.

captcha image reload