رنگینه

نمايش ساعت در سايت‌ها هر چند کار اضافه اي است (چون در دسکتاپ رايانه يا نوار وظيفه حتماً ساعت وجود دارد) اما گاهي به زيبايي سايت مي‌افزايد. براي نمايش ساعت دو راهکار وجود دارد. يکي استفاده از ساعت سيستم کاربر و يکي استفاده از ساعت سرور يا يک منبع ديگر.

کد زير يک کد ساده به زبان JQuery براي نمايش ساعت در بخشي از صفحه نمايش است.

ملزومات:

- فراخواني فايل کتابخانه JQuery مانند:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

- ايجاد يک عنصر Html با شناسه clock، مانند:

<div id="clock"></div>

بعد بايد اسکريپت زير را در جايي از صفحه قرار بديد:

<script>

function updateClock ( )
    {
    var currentTime = new Date ( );
    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( );
 
    // اين دو خط يک صفر قبل از دقيقه و ثانيه در صورتي که کمتر از 10 باشند اضافه مي کند
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
 
    // عبارت صبح يا عصر را طبق ساعت انتخاب مي‌کند
    var timeOfDay = ( currentHours < 12 ) ? "صبح" : "عصر";
 
    // ساعت 24 ساعته را به 12 ساعته تبديل مي‌کند
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
 
    // ساعت صفر بامداد را به 12 تبديل مي‌کند
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;
 
    // متن ساعت را براي نمايش ايجاد مي‌کند
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
     
     // در عنصري با شناسه خاص ساعت را نمايش مي‌دهد
    $("#clock").html(currentTimeString);
         
 } // تابع در اينجا به پايان رسيد. حالا بايد اين تابع فراخواني بشود
 
$(document).ready(function() // وقتي صفحه کاملا لود شد تابع فراخواني مي شود
{
   setInterval('updateClock()', 1000);
});

</script>