ساخت کرنومتر با جاوااسکریپت و HTML
این کرنومتر سه دکمه دارد که کاربر از طریق آنها با کرنومتر تعامل مییابد:
- شروع
- توقف
- شروع مجدد
برای دسترسی راحت تر، کدهای css بصورت جداگانه تعریف نشده و داخل فایل اضافه شده است. دو فاکتور ثانیه و دقیقه وجود دارند که درون span قرار دارند و مقدار اولیه آنها 00 است . با کلیک بر روی دکمه شروع، تابع start اجرا میشود. داخل این تابع، تابع startTimer با زمان هر 1 ثانیه یک بار، صدا زده میشود و برای نمایش صحیح، در صورتی که ثانیه ها به 60 رسیدند؛ به واحد دقیقه یک واحد اضافه شده و خود ثانیه صفر میشود.
از طرف دیگر دقیقه تا قبل از 10، تک رقمی است بنابراین قبل آن باید 0 قرار گیرد و در صورتی دقیقه از 9 عبور کند، باید خود دقیقه (بدون صفری که قبلا در نظر گرفتیم) نمایش داده شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>کرنومتر</title> <style> body{ margin: 0; padding: 0; direction: rtl; bbackground: rgb(123, 107, 200); background: linear-gradient(90deg , rgb(123, 107, 200) 23%, rgb(0, 212, 255) 100%); font-family: tahoma; color: #FFF; } .cc { max-width: 85em; min-width: 320px; margin: 0 auto; padding: 0 0.5em; position: relative; box-sizing: border-box; } h1 { text-align: center; line-height: 3em; } .box { margin: 0 auto; width: 60%; text-align: center; border: 1px solid #FFF; padding: 3em; } button { background: #03aee3; border: 1px solid #FFF; color: #FFF; padding: 1em 2em; border-radius: 5px; font-size: 1em; transition: all 0.5s ease-in-out; } button:hover { color: #03aee3; background: #FFF; } #time { margin-bottom: 1em; font-size: 2em; } </style> </head> <body> <h1>ساخت کرنومتر با جاوااسکریپت و HTML</h1> <div class="cc"> <div class="box"> <div id="time"> <span id="seconds">00</span> : <span id="minutes">00</span> </div> <button onclick="start()">شروع</button> <button onclick="stop()">توقف</button> <button onclick="reset()">شروع مجدد</button> </div> </div> <script> var min = document.getElementById( 'minutes' ); var sec = document.getElementById( 'seconds' ); var minutes = 0; var seconds = 0; var Interval; function start() { clearInterval( Interval ); Interval = setInterval( startTimer, 999 ); } function stop() { clearInterval( Interval ); } function reset() { clearInterval( Interval ); sec.innerHTML = '00'; min.innerHTML = '00'; minutes = 0; seconds = 0; } function startTimer() { seconds++; if( seconds < 9 ) { sec.innerHTML = "0" + seconds; } if( seconds > 9 ) { sec.innerHTML = seconds; } if ( seconds > 59 ) { minutes++; min.innerHTML = "0" + minutes; seconds = 0; } if ( minutes > 9 ) { min.innerHTML = minutes; } } </script> </body> </html> |
برای دیدن نتیجه روی این صفحه کلیک کنید.
عالی واقعا کاربردی