خواندن ۲ دقیقه·۳ سال پیش

با جاوا اسکریپت تایمر بسازید

سلام دوستان ویرگولی من:)

امروز میخواهیم یه تایمر با جاوا اسکریپت بسازیم

پروژه ساختن تایمر تمرینی مفید و موثر برای مبحث Timeدر جاوا اسکریپت میباشد

شما با ساختن یک تایمر خود را میتوانید تست کنید!

برای ساخت تایمر با جاوا اسکریپت باید با مبحث Time اشنایی داشته باشید

ولی اگر اشنایی ندارید شاید دقت در این پروژه شما را با مبحث Time اشنا میکند

ابتدا سه فایل بسازید؛؛

index.html

script.js

style.css

فایل اول فایل اصلی میباشد

فایل دوم فایل کد های اصلی

و فایل سوم فایل css برای زیبا سازی میباشد

حالا این کد ها را در فایل index.html کپی کنید

<!DOCTYPE html> <html lang=&quoten&quot> <head>     <meta charset=&quotUTF-8&quot>     <meta http-equiv=&quotX-UA-Compatible&quot content=&quotIE=edge&quot>     <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>     <title>Make Simple Javascript Timer</title>     <link rel=&quotstylesheet&quot href=&quotstyle.css&quot>     <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot>  </head> <body>    <center>     <div id=&quottimer&quot>       <span id=&quothours&quot>00:</span>       <span id=&quotmins&quot>00:</span>       <span id=&quotseconds&quot>00</span>       </div>     <div id=&quotcontrols&quot>     <button id=&quotstart&quot>Start</button>     <button id=&quotstop&quot>Stop</button>     <button id=&quotreset&quot>Reset</button>     </div>   </center>         <script src=&quotscript.js&quot>

 </body>

</html>

این کد ها را در فایل script.js کپی کنید

var hours =0; var mins =0; var seconds =0;  $('#start').click(function(){       startTimer(); });  $('#stop').click(function(){       clearTimeout(timex); });  $('#reset').click(function(){       hours =0;      mins =0;      seconds =0;   $('#hours','#mins').html('00:');   $('#seconds').html('00'); });  function startTimer(){   timex = setTimeout(function(){       seconds++;     if(seconds >59){seconds=0;mins++;        if(mins>59) {        mins=0;hours++;          if(hours <10) {$(&quot#hours&quot).text('0'+hours+':')} else $(&quot#hours&quot).text(hours+':');         }                             if(mins<10){                            $(&quot#mins&quot).text('0'+mins+':');}               else $(&quot#mins&quot).text(mins+':');                    }         if(seconds <10) {       $(&quot#seconds&quot).text('0'+seconds);} else {       $(&quot#seconds&quot).text(seconds);       }                  startTimer();   },1000); }

تفسیر کد های بالا:

خط های اول متغیر ها رو میسازند

خط های بعد اینگونه است که وقتی ثانیه به ۵۹ رسید ۰ شود و دقیقه بال برود

دقیقه ۵۹ شد ۰ شود و ساعت بالا رود

خط های بعدی هم برای توصیف ثانیه است

فایل css

#timer {     font-size:150px;     margin:0 auto;     width:1000px;   }      #controls {     margin:0 auto;     width:600px;       }      #controls button {     font-size:24px;   }

اسکرین شات:

اگر مشکلی بود کامنت کنید

ساخت جاوا اسکربپت تایمر time

سیدمهدی

فیزیک ده ها فرمول دارد ، اما موفقیت فقط یک فرمول دارد :تلاش+امید 1385/6/16

شاید از این پست‌ها خوشتان بیاید