ساخت تایمر با جاوا اسکریپت
مثال ساخت تایمر با جاوا اسکریپت یک آموزش کاربردی است که در کنار شما آن را حل خواهیم کرد.
ساخت تایمر با جاوا اسکریپت
برای ساخت تایمر به روش زیر عمل کنید.
یک فایل html با نام index.html می‌سازیم و کدهای زیر را در آن قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>CamelCase Timer</title>
<script src="timer.js"></script>
<style type="text/css">
.timer
{
margin: 100px auto;
width: 100px;
}
.timer p
{
display: inline;
font-size: 20px;
}
</style>
</head>
<body>
<div class="timer">
<p id="clock-minute">00</p><p>:</p><p id="clock-second">00</p>
</div>
</body>
</html>
در این مرحله یک فایل جاوااسکریپت با نام timer.js ایجاد کنید و محتوای آن‌را با کدهای زیر پر کنید:
var interval1 = setInterval(tetrisTimer, 1000);
function tetrisTimer() {
var minute = document.getElementById("clock-minute").innerText;
var second = document.getElementById("clock-second").innerText;
if(parseInt(second)===59)
{
var newMin = (parseInt(minute) + 1).toString();
if(newMin<10)
newMin="0" + newMin;
document.getElementById("clock-minute").innerHTML = newMin;
document.getElementById("clock-second").innerHTML = "00";
} else {
newSec = (parseInt(second) + 1).toString();
if(newSec<10)
newSec="0" + newSec;
document.getElementById("clock-second").innerHTML = newSec;
}
}
توضیح: در کد بالا ابتدا دو تگ p باز کردیم و مقدار آیدی آن‌ها را به ترتیب برابر clock-minute و clock-second قرار دادیم. سپس در یک تابع جاوااسکریپت با دسترسی با مقادیر آن‌ها با گذشتن هر ثانیه یک واحد به مقدار ثانیه اضافه کردیم و در صورتی که ثانیه‌ها به 60 برسد آن‌را 0 کرده و به دقیقه یک واحد اضافه خواهیم کرد. برای دانلود مثال بالا روی این لینک کلیک کنید.
برای امتیاز به این نوشته کلیک کنید!
[کل: 5 میانگین: 4.2]