ساخت ساعت آنالوگ با استفاده از moment.js و jQuery

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

شکل1: jQuery و CSS3 بر اساس ساعت آنالوگ

برای ایجاد آنچه که در شکل 1 میبیند ،مراحل زیر را دنبال کنید.

یک صفحه HTml جدید با نام clock.html ایجاد کرده و کد زیر را درون آن کپی کنید

<!DOCTYPE html>
<html >
<head>
    <title> ساعت آنالوگ    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>

    <link rel="stylesheet" href="clock.css">

    <script type="text/javascript" src="clock.js"></script>

</head>
<body>
    <div class="clockarea">
        <div class="clock">
            <div id="hour" class="hourhand">
            </div>
            <div id="minute" class="minutehand">
            </div>
            <div id="second" class="secondhand">
            </div>
        </div>
    </div>
    <br />
    <div class="currentDateTime">
    </div>
</body>
</html>

در کد بالا به moment.js و jQuery اشاره میشود. این صفحه یک مرجع برای فایل های سفارشی مانند clock.css که ما در مرحله بعدی تولید خواهیم کرد و قابلیت های ساعت در clock.js اضافه خواهد شد.

2 . یک فایل stylesheet جدید با نام block.css ایجاد کرده و کد های زیر ار در آن وارد کنید

body {
    font-family:Verdana;
}
.clockarea {
    height:200px;
    width:200px;
    position:relative;
    border-radius:5px;
    background:black;
}

.clock {
    height:100%;
    width:100%;
}

.clock:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: blue;
    border-radius: 6px;
    content: "";
    display: block;
}

.hourhand {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -4px 0 -4px -25%;
    padding: 5px 0 5px 25%;
    background: blue;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    border-radius: 4px 0 0 4px;
}

.minutehand {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -3px 0;
    padding: 40% 3px 0;
    background: blue;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    border-radius: 3px 3px 0 0;
}

.secondhand {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -1px 0 0;
    padding: 40% 1px 0;
    background:blue;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

3 . فایل جاوا اسکریپت جدید با نام clock.js ایجاد کرده و کد اسکریپت زیر را به آن اضافه میکنیم.

$(function(){
  setInterval(function(){
           var now = moment(),
            second = now.seconds() * 6,
            minute = now.minutes() * 6 + second / 60,
            hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
        
        $('.hourhand').css("transform", "rotate(" + hour + "deg)");
        $('.minutehand').css("transform", "rotate(" + minute + "deg)");
        $('.secondhand').css("transform", "rotate(" + second + "deg)");
         
         //Display date and time just below our clock       
        $('.currentDateTime').text(moment().format('MMM DD YYYY HH:mm:ss'));  
        
  },1000);
});

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

فایل های ضمیمه

4608_Analog Clock.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

ساخت ساعت آنالوگ با استفاده از moment.js و jQuery

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید