ساخت ساعت آنالوگ با استفاده از moment.js و jQuery
پنجشنبه 22 بهمن 1394در این مقاله قصد داریم با استفاده از 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. میگیریم، در اینجا زمان فعلی برحسب، ساعت، دقیقه، ثانیه ، و زاویه بر اساس اصول اولیه مثلثاتی محاسبه میکند.
- Jquery
- 4k بازدید
- 5 تشکر