` برای گروه‌بندی المان‌های ساعت استفاده کرده‌ایم. همچنین از یک تگ `

` برای نمایش زمان و دو دکمه برای کنترل ساعت استفاده کرده‌ایم.

استفاده از CSS برای طراحی

برای زیباتر کردن صفحه ساعت، می‌توانیم از CSS استفاده کنیم. با افزودن استایل‌های مناسب، می‌توانیم به طراحی جذاب‌تری برسیم. به عنوان مثال:

“`css

.clock {

text-align: center;

margin-top: 50px;

}

#time {

font-size: 48px;

color: #333;

}

button {

padding: 10px 20px;

font-size: 16px;

margin: 10px;

cursor: pointer;

}

“`

برنامه‌نویسی جاوااسکریپت

برای ذخیره زمان و کنترل ساعت، به کد جاوااسکریپت نیاز داریم. ما می‌توانیم از متدهای `setInterval` و `clearInterval` برای شروع و توقف ساعت استفاده کنیم. کد زیر نمونه‌ای از این کار است:

“`javascript

let timer;

let isRunning = false;

document.getElementById(“start”).addEventListener(“click”, function() {

if (!isRunning) {

isRunning = true;

timer = setInterval(updateTime, 1000);

}

});

document.getElementById(“stop”).addEventListener(“click”, function() {

isRunning = false;

clearInterval(timer);

});

function updateTime() {

const now = new Date();

const timeString = now.toLocaleTimeString();

document.getElementById(“time”).innerText = timeString;

}

“`

در اینجا، با کلیک بر روی دکمه شروع، زمان به‌روز می‌شود و با کلیک بر روی دکمه توقف، زمان متوقف می‌شود.

**مشاهدۀ پرفروش ترین ساعت دیواری**

افزودن خصوصیات اضافی

تنظیم زمان

یکی از خصوصیاتی که می‌توان به ساعت افزود، قابلیت تنظیم زمان است. می‌توانیم با افزودن دکمه‌هایی برای تنظیم ساعت و دقیقه، به کاربران این امکان را بدهیم که زمان مورد نظر خود را تنظیم کنند. برای این کار، می‌توانیم از ورودی‌های HTML استفاده کنیم:

“`html

تنظیم زمان

“`

با استفاده از این ورودی‌ها، کاربران می‌توانند زمان دلخواه خود را وارد کنند. سپس می‌توانیم با استفاده از جاوااسکریپت، این زمان را تنظیم کنیم.

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

برای تنظیم زمان، می‌توانیم کد زیر را به برنامه‌نویسی خود اضافه کنیم:

“`javascript

document.getElementById(“set”).addEventListener(“click”, function() {

const hours = parseInt(document.getElementById(“hours”).value);

const minutes = parseInt(document.getElementById(“minutes”).value);

if (!isNaN(hours) && !isNaN(minutes)) {

const now = new Date();

now.setHours(hours);

now.setMinutes(minutes);

now.setSeconds(0);

document.getElementById(“time”).innerText = now.toLocaleTimeString();

}

});

“`

اضافه کردن زنگ هشدار

یکی دیگر از خصوصیات مفید، افزودن زنگ هشدار به ساعت است. با استفاده از ورودی‌های مناسب و دکمه، می‌توانیم به کاربران امکان دهیم تا زمان هشدار را تنظیم کنند. برای این کار، می‌توانیم از ورودی‌های مشابه استفاده کنیم و یک دکمه برای فعال کردن زنگ هشدار قرار دهیم.

“`html

تنظیم زنگ هشدار

“`

سپس می‌توانیم با استفاده از جاوااسکریپت، زمان زنگ هشدار را ذخیره کرده و آن را با زمان جاری مقایسه کنیم.

کد جاوااسکریپت برای زنگ هشدار

کد زیر برای تنظیم و چک کردن زنگ هشدار است:

“`javascript

let alarmTime;

document.getElementById(“setAlarm”).addEventListener(“click”, function() {

const alarmHours = parseInt(document.getElementById(“alarmHours”).value);

const alarmMinutes = parseInt(document.getElementById(“alarmMinutes”).value);

if (!isNaN(alarmHours) && !isNaN(alarmMinutes)) {

alarmTime = new Date();

alarmTime.setHours(alarmHours);

alarmTime.setMinutes(alarmMinutes);

alarmTime.setSeconds(0);

}

});

setInterval(function() {

const now = new Date();

if (alarmTime && now.getHours() === alarmTime.getHours() && now.getMinutes() === alarmTime.getMinutes()) {

alert(“زمان هشدار!”);

alarmTime = null; // Reset alarm

}

}, ۶۰۰۰۰);

“`

نتیجه‌گیری

ساخت صفحه ساعت یک پروژه مناسب برای یادگیری مفاهیم طراحی وب و برنامه‌نویسی است. با استفاده از HTML، CSS و جاوااسکریپت، می‌توانیم یک ساعت دیجیتال با خصوصیات متنوع بسازیم. این پروژه به شما کمک می‌کند تا مهارت‌های خود را در طراحی و برنامه‌نویسی تقویت کنید و ایده‌های جدیدی برای پروژه‌های بعدی خود پیدا کنید.

با این حال، ساخت صفحه ساعت تنها یک شروع است. می‌توانید با اضافه کردن خصوصیات جدید، طراحی‌های جذاب‌تر و حتی استفاده از فریم‌ورک‌های مختلف، این پروژه را گسترش دهید و به یک برنامه کامل تبدیل کنید. امیدوارم این مقاله به شما در ساخت صفحه ساعت کمک کرده باشد و شما را به ادامه یادگیری و خلاقیت تشویق کند.

“`

مشاهدۀ پرفروش ترین ساعت هوشمند

مشاهدۀ پرفروش ترین ساعت مچی