ساعت توسط JavaScript با روشي جالب و متفاوت و جذاب

[hakan648]

سلام
برخلاف همه ساعت هايي كه توسط JavaScript درست ميكنند من براي تفريح يه ساعتي طراحي كردم كه بجاي متن از تصوير عدد استفاده شده كه فكر ميكنم نكات جالبي هم براي افراد تازه كار در اون وجود داشته باشه ( البته در تاپيكي جداگانه فقط آدرس صفحه رو قرار دادم و هدفم از ايجاد تاپيك جديد قرار گرفتن تاپيك در بالا و استفاده بيشتر از اين مقالست )
آدرس صفحه

آموزش ساخت اين ساعت :
(تصاوير و فايل هاي CSS , JS در فايل ضميمه قرار داده شده)
ابتدا شما بايد حداقل با زبان هاي CSS , HTML , JavaScript آشنايي داشته باشيد .
طرز كار كلي اين ساعت استفاده از يك تصوير ضمينه كه بصورت افقي اعداد 0 تا 9 در اون طراحي شدند.
فاصله ي هر عدد با عدد ديگر 58px است . دقت كنيد كه بهتره كه حتما فاصله رو دقيق داشته باشيد تا كار تميز تر از آب در بياد . خب با اين حساب ما يك تصوير داريم با عرض 43 و طول 580 ( 10 * 58 )
خب حالا توسط كدهاي HTML زير از اين تصوير 6 بار استفاده ميكنيم . 6 تگ DIV كه هركدم با يك ID منحصر بفرد مشخص شدند . هر DIV نشون دهنده ي يك شماره از ساعت هست . ( HH:MM:SS )
دو تگ DIV ديگه هم بعد از تگ دوم و چهارم قرار ميديم براي دونقطه ي جدا كننده ساعت و دقيقه , دقيقه و ثانيه . ( دو تگ Smile , Smile2 براي تصاويري هست كه طبق سليقه شخصي خودم و براي رنگ لعاب دادن به كار استفاده كردم . شما ميتونيد با كمي تغيير در فايل CSS , HTML اين تصاوير رو حذف و يا طبق سليقه خودتون تغييرشون بديد . )

<div class="digCloc">
    <div id="smile2"></div>
    <div id="clocH1"></div>
    <div id="clocH2"></div>
    <div class="SP"></div>
    <div id="clocM1"></div>
    <div id="clocM2"></div>
    <div class="SP"></div>
    <div id="clocS1"></div>
    <div id="clocS2"></div>
    <div id="smile"></div>
</div>
<div style="clear:both;"></div>

حالا از CSS براي مرتب كردن چينش و آرايش عناصر استفاده ميكنيم . همونطوري كه ميدونيد تگ DIV يك تگ جعبه اي هست و به طور عادي نميشه چند تگ رو در يك خط كنار هم قرار داد ( هر تگ تمام عرض والد خودش رو ميپوشونه ) . پس توسط CSS اونهارو به حالت شناور درمياريم ( Float ) و يك ارتفاع و عرض مشخص براشون تعيين ميكنيم . ( در اينجا 48 * 58 رو مشخص ميكنيم تا با تصوير اعداد هماهنگ باشه)
(توجه كنيد كه DIV آخر براي جلوگيري از جمع شدن DIV اصلي با استايل clear:both قرار داده شده )

    .digCloc

    {

        background:url('bg.jpg') repeat-y; margin:2px; text-align:left; font-size:xx-large; float:left; padding:2px; -moz-border-radius:10px;

    }

    .digCloc div

    {

        width:43px; height:58px; float:left; background-image:url('numbers.gif');

    }

    .SP

    {

        background:url('sp.gif') center center no-repeat !important; width:28px !important; height:46px;

    }

    #smile2

    {

    background: url('smile2.gif') center center; padding-right:50px;

    }

    #smile

    {

    background: url('smile.gif') center center; padding-left:40px;

    }

همونطوري كه ديديد ما 8 تگ داشتيم . 6 تا براي اعداد ساعت و 2 تا براي جا كننده .
اين 8 تگ رو در يك تگ ديگه قرار داديم تا راخت تر استايل دهي بشن . ما تگ هاي اعداد رو فقط با نام بردن از والد و اسم تگ مشخص كرديم كه در اينصورت تگ هاي جداكنده هم همون استايل رو دريافت ميكردند . براي حل اين مشكل از كد important! استفاده كرديم تا استايلي كه مجدد مشخص كرديم رو ارجع تر درنظر بگيره . در غير اينصورت هر تگ جدا كننده هم اندازه 42 * 58 رو ميگرفت و بك گراند اون هم عدد ميشد كه اين مدنظر ما نبود . ( بقيه كدها هم ساده و قابل فهم هستند . )
خب كار اصلي ما اينجا آغاز ميشه . جايي كه توسط جاوا اسكريپت ساعت سيستم رو دريافت ميكنيم و بعد توسط CSS در كد نويسي قسمت مناسب تصوير اعداد رو براي بك گراند تعيين ميكنيم .

        function setTime() {

            var clocH1Tag = document.getElementById("clocH1");

            var clocH2Tag = document.getElementById("clocH2");

            var clocM1Tag = document.getElementById("clocM1");

            var clocM2Tag = document.getElementById("clocM2");

            var clocS1Tag = document.getElementById("clocS1");

            var clocS2Tag = document.getElementById("clocS2");

            var nowTime = new Date();

            var nowH = nowTime.getHours();

            var nowM = nowTime.getMinutes();

            var nowS = nowTime.getSeconds();

            if (nowH < 10) { nowH = "0" + nowH };

            if (nowM < 10) { nowM = "0" + nowM };

            if (nowS < 10) { nowS = "0" + nowS };

            clocH1Tag.style.backgroundPosition = "center " + (parseInt(nowH.toString().substr(0, 1)) * 58 + 58) + "px";

            clocH2Tag.style.backgroundPosition = "center " + (parseInt(nowH.toString().substr(1, 1)) * 58 + 58) + "px";

            clocM1Tag.style.backgroundPosition = "center " + (parseInt(nowM.toString().substr(0, 1)) * 58 + 58) + "px";

            clocM2Tag.style.backgroundPosition = "center " + (parseInt(nowM.toString().substr(1, 1)) * 58 + 58) + "px";

            clocS1Tag.style.backgroundPosition = "center " + (parseInt(nowS.toString().substr(0, 1)) * 58 + 58) + "px";

            clocS2Tag.style.backgroundPosition = "center " + (parseInt(nowS.toString().substr(1, 1)) * 58 + 58) + "px";

            document.title = "Digital Cloc {" + nowH + " : " + nowM + " : " + nowS + " } .:Designed By Hakan:.";

            window.setTimeout('setTime()', 1000);

        }

ابتدا توسط ID هايي كه به هر تگ داده بوديم تگ هارو مشخص ميكنيم . و سپس توسط شي Date زمان كنوني رو دريافت ميكنيم و توسط متدهاي مربوط ساعت , دقيقه و ثانيه رو استخراج ميكنيم .
حالا توسط يك عبارت شرطي تعيين ميكنيم هر جز زمان (* ساعت . دقيقه . ثانيه *) كمتر از صفر هستند يا بيشتر از صفر . چون ما براي هر قسمت زمان (*) به يك عدد دو رقمي نياز داريم در حالي كه ممكنه اون قسمت يك رقمي باشه و برنامه مشكل پيدا كنه . چون توسط متد substr در هر اجراي تابع يك رقم از هر جز زمان (*) رو دريافت ميكنيم . ( يكم گيج شدم خودم D: )
حالا ما 8 تگ داريم و در هر اجراي تابع 8 عدد كه مربوط به زمان ميشند .
تنها كاري كه بايد انجام بديم نسبت دادن عدد حاصل به بك گراند تصوير DIV ها توسط CSS .
كه اين كار هم با تبديل كردن عدد حاصل به نوع عدد و قرار دادن اون در يك رشته كد CSS انجام ميشه.
در آخر براي اينكه زمان نشون داده شده در تصاوير هميشه بروز باشه توسط متد setTimeout از شي window در فاصله هاي زماني يك ثانيه يك ثانيه متد رو اجرا ميكنيم .
خب كار اصلي كد نويسي ما تموم ميشه اما من براي زيبايي كار توسط (property) يا خاصيت شي window يعني title ساعت رو در عنوان صفحه هم نمايش ميدم . ( از اينجا ميتونيم بفهميم چطوري نوشته هاي متحرك در عنوان صفحه قرار ميدن و ديگه از اين كار طراح ها به وجد نميايم D: )

اوه داشت يادم ميرفت . در صفحه HTML در تگ Body عبارت

onload="setTime()"

رو قرار ميديم تا درست موقع Load شدن صفحه تابع ما هم شروع به كار كنه .

اگر اين خط رو قرار نديم تابع ما هيچ وقت شروع به كار نميكنه (;

(اگه جايي از اين آموزش اشتباه بود يا نا مفهوم حتما تذكر بديد تا برطرفش كنم )
خب هم من و هم شما خسته نباشيم بخاطر نوشتن من و خوندن شما و يادگيري اين آموزش
اميدوارم اين آموزش براتون جالب بوده باشه ...