azami.cu@gmail.com | +98912 373 8239

ساخت یک ساعت دیجیتال با jQuery و CSS3

از مجموعه تکنیک های جاوا اسکریپت - برای حرفه ای شدن
 digital click, digital clock with jquery, digital clock with css, top jQuery, top css, ساعت دیجیتال با جاوا اسکریپت, ساعت دیجیتال با jQuery , jquey آموزش jquey مثال css آموزش css مثال
به همت مهندس اعظمی در 1392/10/21

سلامی دوباره خدمت شما دوستان عزیز

امروز می خوایم طریقه ساخت یک ساعت دیجیتال با jQuery و CSS3 رو باهم بررسی بکنیم .
خیلی ساده هست فقط باید یکم اطلاعاتتون رو بیشتر بکنید، به شرط اینکه یکم توجه هم داشته باشید!

اطلاعات کلی
اگر شما با مفهوم سون سگمنت کمی آشنایی داشته باشید میدونید که برای نمایش هر عدد بین یک تا هفت باید تعدادی از خونه های اون رو باید روشن بکنیم مثلا برای عدد صفر، شش تا و عدد سه، پنج تا و ...
و حالا ما از این مفهوم استفاده میکنیم و با CSS3 تمامی سگمنت ها رو میسازیم و بعد با jQuery هر عددی رو که بخوایم نشون میدیم همین!
البته این رو هم بگم که ورودی ساعت رو هم از سیستم کاربر میخونه

در مرحله اول باید container های اصلی رو بسازیم و همینقدر کد HTML کفایت میکنه!
چون بقیه اجزا بصورت پویا با jQuery ساخته میشن


حالا میریم سراغ کدهای استایل



/*-------------------------
    بخش اصلی ساعت
--------------------------*/


#clock{
    width:370px;
    padding:40px;
    margin:200px auto 60px;
    position:relative;
}

#clock:after{
    content:'';
    position:absolute;
    width:400px;
    height:20px;
    border-radius:100%;
    left:50%;
    margin-left:-200px;
    bottom:2px;
    z-index:-1;
}


#clock .display{
    text-align:center;
    padding: 40px 20px 20px;
    border-radius:6px;
    position:relative;
    height: 54px;
}


/*-------------------------
   تم کلی
--------------------------*/


#clock.light{
    background-color:#f3f3f3;
    color:#272e38;
}

#clock.light:after{
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

#clock.light .digits div span{
    background-color:#272e38;
    border-color:#272e38;   
}

#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after{
    background-color:#272e38;
}

#clock.light .alarm{
    background:url('../img/alarm_light.jpg');
}

#clock.light .display{
    background-color:#dddddd;
    box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}


/*-------------------------
    اعداد
--------------------------*/


#clock .digits div{
    text-align:left;
    position:relative;
    width: 28px;
    height:50px;
    display:inline-block;
    margin:0 4px;
}

#clock .digits div span{
    opacity:0;
    position:absolute;

    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    transition:0.25s;
}

#clock .digits div span:before,
#clock .digits div span:after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border:5px solid transparent;
}
//شبیه سازی سگمنت بالا یا
// d1
#clock .digits .d1{         height:5px;width:16px;top:0;left:6px;}
//شبیه سازی زاویه ها
#clock .digits .d1:before{  border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
#clock .digits .d1:after{   border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}

//شبیه سازی سگمنت افقی وسط
#clock .digits .d2{         height:5px;width:16px;top:24px;left:6px;}
#clock .digits .d2:before{  border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
#clock .digits .d2:after{   border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}

//شبیه سازی سگمنت افقی پایین
#clock .digits .d3{         height:5px;width:16px;top:48px;left:6px;}
#clock .digits .d3:before{  border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
#clock .digits .d3:after{   border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}

//شبیه سازی سگمنت عمودی سمت چپ بالا
#clock .digits .d4{         width:5px;height:14px;top:7px;left:0;}
#clock .digits .d4:before{  border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d4:after{   border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}

//شبیه سازی سگمنت عمودی سمت راست بالا
#clock .digits .d5{         width:5px;height:14px;top:7px;right:0;}
#clock .digits .d5:before{  border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d5:after{   border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}

//شبیه سازی سگمنت عمودی سمت چپ پایین
#clock .digits .d6{         width:5px;height:14px;top:32px;left:0;}
#clock .digits .d6:before{  border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d6:after{   border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}

//شبیه سازی سگمنت عمودی سمت راست پایین
#clock .digits .d7{         width:5px;height:14px;top:32px;right:0;}
#clock .digits .d7:before{  border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d7:after{   border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}


//شبیه سازی اعداد با خاموش روشن کردن سگمنت های ساخته شده بالا
/* 1 */

#clock .digits div.one .d5,
#clock .digits div.one .d7{
    opacity:1;
}

/* 2 */

#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3{
    opacity:1;
}

/* 3 */

#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3{
    opacity:1;
}

/* 4 */

#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7{
    opacity:1;
}

/* 5 */

#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7{
    opacity:1;
}

/* 6 */

#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
    opacity:1;
}


/* 7 */

#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
    opacity:1;
}

/* 8 */

#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
    opacity:1;
}

/* 9 */

#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
    opacity:1;
}

/* 0 */

#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
    opacity:1;
}


/* ساختن نقطه */

#clock .digits div.dots{
    width:5px;
}

#clock .digits div.dots:before,
#clock .digits div.dots:after{
    width:5px;
    height:5px;
    content:'';
    position:absolute;
    left:0;
    top:14px;
}

#clock .digits div.dots:after{
    top:34px;
}


/*-------------------------
    هشدار
--------------------------*/


#clock .alarm{
    width:16px;
    height:16px;
    bottom:20px;
    background:url('../img/alarm_light.jpg');
    position:absolute;
    opacity:0.2;
}

#clock .alarm.active{
    opacity:1;
}


/*-------------------------
    روزهای هفته
--------------------------*/


#clock .weekdays{
    font-size:12px;
    position:absolute;
    width:100%;
    top:10px;
    left:0;
    text-align:center;
}


#clock .weekdays span{
    opacity:0.2;
    padding:0 10px;
}

#clock .weekdays span.active{
    opacity:1;
}


/*-------------------------
        صبح ویا عصر
--------------------------*/


#clock .ampm{
    position:absolute;
    bottom:20px;
    right:20px;
    font-size:12px;
}                             
                                    

حالا میریم سراغ کدهای jQuey

ابتدا باید کتابخونه زیر رو به پروژه اضافه بکنیم، برای بدست آوردن رشته ای زمان جاری

                                    
                                



اینم از توابع اصلی که توضیحات درونش هست

                                  
$(function(){

    // ابتدا ساعت کامل رو بصورت پویا ساخته و در کانتینرهایی که قبلا ایجاد کردیم قرار میدیم
    // کش کردن کانتینر ها
    var clock = $('#clock'),
        alarm = clock.find('.alarm'),
        ampm = clock.find('.ampm');

    // مپ کردن اعداد به اسمشون
    var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

    // ساخت آبجکت برای نگهداشتن اعداد
    var digits = {};

    // متغیر برای نگهداشتن ساعت، دقیقه و ثانیه
    var positions = [
        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
    ];

    // ساختن ساعت و سگمنت ها و ریختن اونا توی جای اصلی خودشون

    var digit_holder = clock.find('.digits');

    $.each(positions, function(){

        if(this == ':'){
            digit_holder.append('
'); } else{ var pos = $('
'); for(var i=1; i<8; i++){ pos.append(''); } digits[this] = pos; // قراردادن اعداد در صفحه digit_holder.append(pos); } }); // قرار دادن نام روزهای هفته در صفحه var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '), weekday_holder = clock.find('.weekdays'); $.each(weekday_names, function(){ weekday_holder.append('' + this + ''); }); var weekdays = clock.find('.weekdays span'); // اجرا ساعت هر یک ثانیه یک بار (function update_time(){ // استفاده از کتابخونه اضافه شده برای بدست آوردن رشته ای زمان جاری var now = moment().format("hhmmssdA"); // ساعت digits.h1.attr('class', digit_to_name[now[0]]); digits.h2.attr('class', digit_to_name[now[1]]); // دقیقه digits.m1.attr('class', digit_to_name[now[2]]); digits.m2.attr('class', digit_to_name[now[3]]); // ثانیه digits.s1.attr('class', digit_to_name[now[4]]); digits.s2.attr('class', digit_to_name[now[5]]); var dow = now[6]; dow--; if(dow < 0){ dow = 6; } // انتخاب روز جاری weekdays.removeClass('active').eq(dow).addClass('active'); // ست کردن صبح و یا عصر ampm.text(now[7]+now[8]); // اجرا تابع هر یک ثانیه یک بار setTimeout(update_time, 1000); })(); });


اینم از پیشنمایش:


فقط این نکته رو فراموش نکنید که این کار با CSS3 انجام میشه و فقط در مرورگرهای جدید قابل نمایش هستش.

با تشکر از توجه شما -با عضویت در sarat از آخرین آموزش ها و مطالب با خبر شوید.



Tags: , , , , , , ,




Tags:   digital click, digital clock with jquery, digital clock with css, top jQuery, top css, ساعت دیجیتال با جاوا اسکریپت, ساعت دیجیتال با jQuery , jquey آموزش jquey مثال css آموزش css مثال