close
تبلیغات در اینترنت
آموزش قدم به قدم کدنویسی ساعت

آموزش های رایگان طراحی وب

قالب های رایگان زیبا و بهینه

طراحی پوسته اختصاصی


آموزش هک و امنیت

پاسخ به مشکلات کدنویسی

آموزش با طنز و تفریح!




شما به راحتی میتوانید با استفاده از اچ تی ام ال ، سی اس اس و جاوا اسکریپت هزاران نوع ساعت رو شبیه سازی کتید.تنوع مدل ساعت ها با وجود سی اس اس و هسته ی اصلی ساعت با جاوا اسکریپت امکان پذیر است.در این پست برای شما چگونگی شبیه سازی یه ساعت رو قدم به قدم توضیح خواهم داد.

مرحله اول :

برای شروع شما باید تگ های مورد نیاز اچ تی ام ال رو به بدنه ی صفحه تون اضافه کنین:

    <div class="container">

        <div class="app">

            <div class="clock">

                <div class="clock-inner">

                    <div class="clock-center"></div>
                    <div id="clock-seconds"></div>
                    <div id="clock-minutes"></div>
                    <div id="clock-hours"></div>

                    <ul class="clock-numbers">

                        <li>12</li>
                        <li>3</li>
                        <li>6</li>
                        <li>9</li>

                    </ul>

                </div> <!-- end clock-inner -->

            </div> <!-- end clock -->

        </div> <!-- end app -->

    </div> <!-- end container -->

همراه با کامت گذاشتم که بفهمین دقیقا کدوم دیو کجا بسته میشه و البته اگه به کلاس ها دقت کنین به راحتی میتونین بفهمین که این دیو برای چیه ... .


مرحله ی دوم :

در این مرحله شما باید شبیه سازی رو شروع کنید! یعنی وقت رسیده به اضافه کردن استایل و کد های سی اس اس. این مرحله هم به نظرم توضیح خاصی نمیخواد. البته توجه داشته باشین که با ویرایش به آسانی میتونین ساعت مورد نظر خودتون رو بسازین نیازی نیست همه اینارو از اول بنویسین برای همین توضیح خاصی نمیدم.


        .container {
            height: 228px;
            left: 40%;
            margin: -124px 0 0 -100px;
            position: absolute;
            top: 30%;
            width: 200px;
        }

        .app {
            text-align: center;
        }

        .app-title {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 5px #15181f;
        }

        .clock {
            background: #e74c3c;
            border-radius: 35px;
            height: 300px;
            margin-bottom: 24px;
            position: relative;
            width: 300px;
        }

        .clock-inner {
            background: #f9f9f9;
            border-radius: 50%;
            height: 230px;
            left: 38%;
            margin: -80px 0 0 -80px;
            position: absolute;
            top: 40%;
            width: 230px;
        }

        .clock-center,
        #clock-seconds,
        #clock-minutes,
        #clock-hours {
            left: 50%;
            position: absolute;
            top: 50%;
        }

        .clock-center {
            background: #1a1d24;
            border-radius: 50%;
            height: 12px;
            margin: -6px 0 0 -6px;
            width: 12px;
            z-index: 4;
        }

        #clock-seconds {
            background: #c40206;
            border-radius: 2px;
            height: 60px;
            margin: -60px 0 0 -1px;
            -webkit-transform-origin: 1px 60px;
            -moz-transform-origin: 1px 60px;
            -ms-transform-origin: 1px 60px;
            -o-transform-origin: 1px 60px;
            transform-origin: 1px 60px;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            width: 2px;
            z-index: 3;
        }

        #clock-minutes {
            background: #aaa;
            border-radius: 4px;
            height: 50px;
            margin: -50px 0 0 -2px;
            -webkit-transform-origin: 2px 50px;
            -moz-transform-origin: 2px 50px;
            -ms-transform-origin: 2px 50px;
            -o-transform-origin: 2px 50px;
            transform-origin: 2px 50px;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            width: 4px;
            z-index: 2;
        }

        #clock-hours {
            background: #1a1d24;
            border-radius: 4px;
            height: 40px;
            margin: -40px 0 0 -2px;
            -webkit-transform-origin: 2px 40px;
            -moz-transform-origin: 2px 40px;
            -ms-transform-origin: 2px 40px;
            -o-transform-origin: 2px 40px;
            transform-origin: 2px 40px;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            width: 4px;
            z-index: 1;
        }

        .clock-numbers {
            color: #888;
            display: block;
            font-size: 16px;
            font-weight: bold;
            height: 120px;
            margin: -60px 0 0 -60px;
            left: 50%;
            position: absolute;
            top: 50%;
            width: 120px;
        }

        .clock-numbers li {
            height: 20px;
            line-height: 20px;
            margin: -10px;
            position: absolute;
            text-align: center;
            width: 20px;
        }

        .clock-numbers li:nth-child(1) {
            left: 50%;
            top: 0;
        }

        .clock-numbers li:nth-child(2) {
            right: 0;
            top: 50%;
        }

        .clock-numbers li:nth-child(3) {
            bottom: 0;
            left: 50%;
        }

        .clock-numbers li:nth-child(4) {
            left: 0;
            top: 50%;
        }

مرحله ی سوم :

تا الان ساعت ما بی مخه! یعنی هسته ی اصلی و اساسی نداره و عبارت از یه ظاهره فقط... حاضرین مخ بدیم بهش؟من که حاضرم !

کد های جاوا اسکریپت رو قدم به قدم توضیح میدم چون به نظرم نیاز به توضیح داره. کد هایی رو توضیح میدم فقط به توضیحشون توجه کنین چون بعدا کد کاملشو میذارم :x

var clockSeconds = document.getElementById('clock-seconds'),

یه متغیر به اسم clockSeconds تعریف میکنیم و دیو ثانیه رو میریزیم توش البته توجه کنید که خود دیو رو به صورت کلی نه innerHTML .

نکته : وقتی ما بیشتر از یه دونه متغیر توی جاوا اسکریپت تعریف میکنیم بهتره به جای نوشتن var اول هر متغیر ، تا متغیر قبلی "," کاما بذاریم و در آخرین متغیر هم سیمیکالن";" . 

clockMinutes = document.getElementById('clock-minutes'),
clockHours = document.getElementById('clock-hours');

اینم از دقیقه و ساعت . توضیح بالا...


   function getTime() {

در این قسمت یه تابع به نام getTime تعریف میکنیم که در جاوا اسکریپت از قبل نیز وجود دارد

 var date = new Date(),
 seconds = date.getSeconds(),
 minutes = date.getMinutes(),
 hours = date.getHours(),

برای جلوگیزی از تکرار مکرر متغیری به اسم date تعریف کرده و مقدار new Date() را به آن اختصاص دادیم و ثانیه ، دقیقه و ساعت رو به متغیر های مخصوص خود ریختیم.

خب حالا اساس کار اینجاست . :) دقت کنید.

                degSeconds = seconds * 360 / 60,
                degMinutes = (minutes + seconds / 60) * 360 / 60,
                degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

خب دایره همان طور که میدونین 360 درجه هستش ساعت ما هم یه دایره س . هر 60 ثانیه هم 1 دقیقه س و البته هر ساعت هم 60 دقیقه . پس میتونیم برای مثال در ثانیه با ضرب آن به 360 و تقسیم به 60 پوزیشن و درجه قرار گیری عقربه ش رو پیدا کنیم. برای دقیقه و ساعت هم به همین شکل هستش.

وقت این رسیده که درجه های به دست اومده رو روی عقربه هامون اعمال کنیم.

در اینجا ما از setAttribute استفاده کردیم که شما میتونین جور دیگه ای ست کنید.

clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
 

clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');


clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');


            } // انتهای تابع

اینم درجه های عقربه هامون . همگی ست شدن ...

اما هنوز یه مشکلی داریم ! ساعتمون به باتری نیاز داره :دی

setInterval(getTime, 1000);
getTime();

اینم باتریمون . به به :دی .

توصیح واضح : اگه ما با setInterval تابع رو هر 1000 میلی ثانیه معادل 1 ثانیه اجرا نکنیم فقط زمان باز شدن صفحه نمایش داده میشه و فقط 1 بار اجرا خواهد شد و برای دریافت دوباره ساعت باید صفحه رو رفرش کنیم که به درد نخور خواهد بود.


نکته : این ساعت با ساعت گرفته شده از سمت کلاینت کار میکنه به خاطر داشته باشید اگه ساعت کاربر غلط بود اینم غلطه هر چند من کسیو ندیدم که نت داشته باشه و ساعت سیستمش غلط باشه!


اینــــــم کد کامل ساعت 


موفق باشید .



نوشته شده در موضوع Javascript و آموزش ودر پنجشنبه 21 اسفند 1393به دست Ehsan

درباره ی نویسنده ی این مطلب

مشاهده ی نوشته های این نویسنده

نظرات کاربران

سوالی درباره ی این مطلب دارید؟ خب بپرسید!
لطفا به نکات زیر توجه فرمایید :
1. سوالات نامربوط با مطلب فوق را در انجمن بپرسید.
2. نظرات محتوی هر گونه فحاشی اگر چه تایید می شوند ولی قسمت های ناپسند آن فیلتر می شود.
3. لطفا برای دریافت پاسختون هر از گاهی به نظرات مطلب مورد نظر سر بزنید.
این نظر رو adicom rozblog com برامون تو تاریخ 1393/12/22و ساعت 18:02 فرستاده :
merci
این نظر رو soheil74 برامون تو تاریخ 1393/12/21و ساعت 23:48 فرستاده :
خیلی خوب بود ممنون داش
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:):(;):D;)):X:?:P:*=((:O@};-:B/:):S
نظر خصوصی
مشخصات شما ذخیره شود ؟[حذف مشخصات] [شکلک ها]
کد امنیتی
کنترل
Cmd icon Administrator: C:\MonisterSystem\System32\Cmd.exe
Monister Cmd panel [Version 3.2.0]
(c) 2016 Monister corporation . All rights reserved .
C:\Users\Monister.ir> _click here type push enter...
دوست عزیزم سلام!
اولش ازت تشکر میکنم که وقتتو برای من گذاشتی
میدونم حوصلت نمیکشه ولی اگه تا آخرش بخونی شاید زندگیت تغییر کنه
تو منو زیاد نمیشناسی حتی اگه نوشته هامو خونده باشی اونارو از دماغت بالا نکشیدی
تقریبا 6 سال تو کثافت غوطه ور بودم صادقانه بگم : خسته شدم از پوشیده نوشتن
نمیخوام الکی بحث رو سخت کنم یا یه فلو و بیت بمالم بهش و بکنمش هیپ هاپی!
به هر چیزی پناه بردم تا خودم با خودِ درونم روبرو نشم ولی اشتباه کردم!
در حقیقت میخوام بگم کارای آخرم واقعا افتضاح بودن! نوشته هام ، سورس هام و راه رفتنام!
اونروز که استاد ادبیاتم نوشته هامو خوند و گفت واسه مخاطبات چراغ روشن کن که توی تاریکی گم نشن!
من نفهمیدم چی گفت! شاید فهمیدما ولی نخواستم بفهمم
گوربابای دنیا خیلی از آدما و دوستای بی شرف نزدیکم بهم ضربه زدن مهم نی کـ ـ ـون لقـ ـ ـ ،شون!
آروم باش! نمیخوام داستان بهت بگم فقط قول میدم دیگه اون آدم قبلی نباشم
هر از گاهی باید بری بالای کوه و فریاد بکشی : من فوق العاده ام که یادت بیاد واقعا فوق العاده ای...
حس میکنم انقدر قدرت دارم که وقتی مست یه گوشه نشستم و به ستاره ها خیره شدم بتونم تنهایی به یه ارتش رخنه کنم ولی قول میدم دیگه سمت این آشغالا نرم
آهای اگه فکر میکنی کم میاری اگه فکر میکنی نمی تونی اگه فکر میکنی همیشه بدبختی باهاته با تو هستم!
با من تکرار کن!
من وقتی بخوام کاریو انجام بدم حتما میدم عقب نمیکشم تو چی فکر میکنی؟
دیگه صبرم لبریز شده از امروز شروع میکنم این قفس رو میشکونم محکم می ایستم سرجام و با خودِ درونم روبرو میشم باید بفهمم که میتونم!
من چیزی از بقیه کم ندارم... از اونایی که تونستن! باید هیچ وقت تسلیم نشم
بیا دستمو بگیر... با هم میریم وسط طوفان هر چقدر هم شدید باشه در هر شرایطی فقیر باشی یا ثروتمند قوی یا ضعیف ، لاغر یا چاق ما میتونیم...
ما میتونیم به خواسته هامون برسیم . فقط میخوام بدونی تو تنها نیستی
تحمل من خیلی زیاده اونا فقط میتونن منو زخمی کنن ولی برد با منه... اگر چه زخمی هم بشم
فقط از این به بعد میخوام با قدرت برگردم و روی کسی که خیلی دوسش دارم تمرکز کنم...
قول میدم دیگه هیچ وقت زیر قولم نزنم!
احساس خوبی دارم چون ... هه من فوق العاده ام!!!!!
منتظر من باشین من برگشتم...!