آموزش ساخت ساعت

آموزش ساخت ساعت

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

برای مشاهده لینک وارد شود

خوب کار رو با نوشتن تکه کدهای HTML آغاز می کنیم .در این آموزش ما کدها رو بصورت فایل جداگانه ای نخواهیم نوشت بلکه ما آنها را بصورت داینامیکی توسط جی کوئری  به صفحه اضافه خواهیم کرد.

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

در زیر نحوه وارد کردن کد توسط جی کوئری را مشاهده می کنید.

jquery.tzineClock.js


کد بالا سه بار برای ایجاد ساعت،دقیقه و ثانیه  تولید میشود.کمی جلوتر ما برای آنها یک انیمیشن قرار خواهیم داد و هر ثانیه آنها را آپدیت خواهیم کرد. سه کلاس جهت نگه داری آنها وجود دارد که به رنگ  سبز،آبی و نارنجی  ما مشخص خواهیم کرد.

i13

خوب به سراغ کدهای CSS میرویم.قبل از اینکه استایلی به صفحه اعمال کنیم ابتدا آنها را به بالا کدمان وارد می کنیم.

demo.html



همانطور که در بالا مشاهده می کنید ما دو فایل را به کدمان وارد کردیم.اولین سطر استایل صفحه پیش نمایش است و دومین سطر مربوط به شماره های رنگی.

خوب ما اکنون به بررسی دقیقتر کدهای CSS می پردازیم.

styles.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Simple page reset */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    color:#dddddd;
    font-size:13px;
    background: #302b23;
    font-family:Arial, Helvetica, sans-serif;
}

#fancyClock{
    margin:40px auto;
    height:200px;
    border:1px solid #111111;
    width:600px;
}

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

jquery.tzineClock.css

.clock{
    /* The .clock div. Created dynamically by jQuery */
    background-color:#252525;
    height:200px;
    width:200px;
    position:relative;
    overflow:hidden;
    float:left;
}

.clock .rotate{
    /* There are two .rotate divs - one for each half of the background */
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
}

.rotate.right{
    display:none;
    z-index:11;
}

.clock .bg, .clock .front{
    width:100px;
    height:200px;
    background-color:#252525;
    position:absolute;
    top:0;
}

.clock .display{
    /* Holds the number of seconds, minutes or hours respectfully */
    position:absolute;
    width:200px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    z-index:20;
    color:#F5F5F5;
    font-size:60px;
    text-align:center;
    top:65px;
    left:0;

    /* CSS3 text shadow: */
    text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
    left:0;
    z-index:10;
}

jquery.tzineClock.cssجزئی از پلاگین ما است و یکی از جذابیت های این پلاگین نحوه استایل شمارنده ها است که در روی شکل نیز توضیح داده شده اند.

i22

خوب اکنون به سراغ کدهای جی کوئری میرویم.ابتدا کتابخانه های مورد نیاز را به صفحه وارد می کنیم.

demo.html




سپس به نحوه فراخوانی نیز توجه کنید.

script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('#fancyClock').tzineClock();

});

حالا بصورت دقیقتر کدهای اسکریپت را بررسی می کنیم.

jquery.tzineClock.js

(function($){
    // A global object used by the functions of the plug-in:
    var gVars = {};

    // Extending the jQuery core:

    $.fn.tzineClock = function(opts){

        // "this" contains the elements that were selected when calling the plugin: 		$('elements').tzineClock();
        // If the selector returned more than one element, we use the first one:
        var container = this.eq(0);
        if(!container)
        {
            try{
                console.log("Invalid selector!");
            } catch(e){}

            return false;
        }

        if(!opts) opts = {};

        var defaults = {
            /* Additional options will be added in future versions of the plugin. */
        };

        /* Merging the provided options with the default ones (will be used in future versions of the plugin): */

        $.each(defaults,function(k,v){
            opts[k] = opts[k] || defaults[k];
        });

        // Calling the setUp function and passing the container,
        // will be available to the setUp function as "this":

        setUp.call(container);

        return this;
    }

    function setUp()
    {
        // The colors of the dials:
        var colors = ['orange','blue','green'];

        var tmp;
        for(var i=0;i<3;i++)
        {
            // Creating a new element and setting the color as a class name:

            tmp = $('
').attr('class',colors[i]+' clock').html( '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
' ); // Appending to the fancyClock container: $(this).append(tmp); // Assigning some of the elements as variables for speed: tmp.rotateLeft = tmp.find('.rotate.left'); tmp.rotateRight = tmp.find('.rotate.right'); tmp.display = tmp.find('.display'); // Adding the dial as a global variable. Will be available as gVars.colorName gVars[colors[i]] = tmp; } // Setting up a interval, executed every 1000 milliseconds: setInterval(function(){ var currentTime = new Date(); var h = currentTime.getHours(); var m = currentTime.getMinutes(); var s = currentTime.getSeconds(); animation(gVars.green, s, 60); animation(gVars.blue, m, 60); animation(gVars.orange, h, 24); },۱۰۰۰); } function animation(clock, current, total) { // Calculating the current angle: var angle = (360/total)*(current+1); var element; if(current==0) { // Hiding the right half of the background: clock.rotateRight.hide(); // Resetting the rotation of the left part: rotateElement(clock.rotateLeft,0); } if(angle<=180) { // The left part is rotated, and the right is currently hidden: element = clock.rotateLeft; } else { // The first part of the rotation has completed, so we start rotating the right part: clock.rotateRight.show(); clock.rotateLeft.show(); rotateElement(clock.rotateLeft,180); element = clock.rotateRight; angle = angle-180; } rotateElement(element,angle); // Setting the text inside of the display element, inserting a leading zero if needed: clock.display.html(current<10?'0'+current:current); } function rotateElement(element,angle) { // Rotating the element, depending on the browser: var rotate = 'rotate('+angle+'deg)'; if(element.css('MozTransform')!=undefined) element.css('MozTransform',rotate); else if(element.css('WebkitTransform')!=undefined) element.css('WebkitTransform',rotate); // A version for internet explorer using filters, works but is a bit buggy (no surprise here): else if(element.css("filter")!=undefined) { var cos = Math.cos(Math.PI * 2 / 360 * angle); var sin = Math.sin(Math.PI * 2 / 360 * angle); element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')"); element.css("left",-Math.floor((element.width()-200)/2)); element.css("top",-Math.floor((element.height()-200)/2)); } } })(jQuery)

برای تعریف یک تابع سفارشی از متد jQuery.fn استفاده می کنیم.

دوتابعی که در آخر مورد استفاده قرار گرفته اند عبارتند از:animation و rotateElement.اولین تابع کار به روز رسانی شمارنده را انجام میدهد و تابع دوم نیز کار چرخش عناصر را بر عهده دارد(چرخش شمارنده هر بخش).
البته باید به این نکته توجه داشته باشید که عمل چرخش در مرورگرهای جدید پشتیبانی میشوند.

پایان

+5
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاهی نیست.

  1. مطالب سایتتون عالیه خیلی آموزنده و مفید
    موفق باشید

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت − 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>