مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه کاربردی **کرنومتر** با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **کرنومتر** با استفاده از HTML، CSS و JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

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

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



در اینجا یک پروژه ساده برای ایجاد یک **کرنومتر** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا زمان را به‌صورت معکوس محاسبه کنند و دکمه‌های شروع، متوقف و تنظیم مجدد را داشته باشد.
 
### 1. **HTML**
ابتدا ساختار HTML را برای کرنومتر ایجاد می‌کنیم.
 
```html
   
   
    کرنومتر
   
   
       

کرنومتر

       
00:00:00
       
           
           
           
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری کرنومتر از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.stopwatch {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
#display {
    font-size: 48px;
    margin-bottom: 20px;
    color: #333;
}
 
button {
    padding: 10px 15px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #28a745;
    color: white;
}
 
button:hover {
    background-color: #218838;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
let startTime;
let updatedTime;
let difference;
let t;
let running = false;
 
// انتخاب عناصر HTML
const display = document.getElementById("display");
const startBtn = document.getElementById("startBtn");
const stopBtn = document.getElementById("stopBtn");
const resetBtn = document.getElementById("resetBtn");
 
// تابع شروع
function startTimer() {
    if (!running) {
        startTime = new Date().getTime();
        t = setInterval(getTime, 1);
        running = true;
    }
}
 
// تابع متوقف کردن
function stopTimer() {
    clearInterval(t);
    running = false;
}
 
// تابع تنظیم مجدد
function resetTimer() {
    clearInterval(t);
    running = false;
    difference = 0;
    display.innerHTML = "00:00:00";
}
 
// تابع محاسبه زمان
function getTime() {
    updatedTime = new Date().getTime();
    difference = updatedTime - startTime;
 
    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((difference % (1000 * 60)) / 1000);
 
    display.innerHTML = (hours < 10 ? "0" + hours : hours) + ":" +
                        (minutes < 10 ? "0" + minutes : minutes) + ":" +
                        (seconds < 10 ? "0" + seconds : seconds);
}
 
// افزودن رویدادها
startBtn.addEventListener("click", startTimer);
stopBtn.addEventListener("click", stopTimer);
resetBtn.addEventListener("click", resetTimer);
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان کرنومتر، نمایش زمان و دکمه‌های شروع، توقف و تنظیم مجدد است.
2. **CSS**: طراحی ساده برای کرنومتر با استفاده از رنگ‌ها و نمای متعادل.
3. **JavaScript**:
   - **زمان شروع**: وقتی کاربر بر روی دکمه شروع کلیک می‌کند، زمان شروع را ثبت می‌کند و تابعی برای به‌روزرسانی زمان را فعال می‌کند.
   - **توقف و تنظیم مجدد**: شامل توابعی برای متوقف کردن و تنظیم مجدد زمان.
   - **محاسبه زمان**: زمان گذشته را محاسبه کرده و به فرمت ساعت، دقیقه و ثانیه نمایش می‌دهد.
   - **رویدادها**: دکمه‌ها برای شروع، توقف و تنظیم مجدد به توابع مربوطه متصل می‌شوند.
 
### نتیجه‌گیری
این پروژه **کرنومتر** یک مثال عالی برای یادگیری نحوه کار با زمان و رویدادها در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره زمان‌های ثبت شده یا افزودن صدا برای شروع و توقف را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه کاربردی **کرنومتر** با استفاده از HTML، CSS و JavaScript می‌باشد