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

5 تیر 1402
برنامه نویسی
آموزش ساخت تایمر با جاوا اسکریپت

آموزش ساخت تایمر با جاوا اسکریپت بسیار کاربردی است. دراین آموزش شما با کدهای htmlوcssوjavascript  تایمری جذاب می سازید. برای ساخت این تایمر جذاب با این آموزش از لایت کالج همراه باشید:

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

HTML چیست؟

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

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

مراحل ساخت تایمر

برای ساخت تایمر با جاوا اسکریپت در ابتدای کار یک پوشه با اسم دلخواه ایجاد کنید. سپس سه فایل با نام index.html,style.css,script.js بسازید. وارد محیط کدنویسی شوید و فایل ها را در آن آپلود کنید.

با html شما می توانید ساختار سایت مانند: دکمه ها و متن ها را بسازید. یک ساختمان را فرض کنید، ستون ها و بدنه ساختمان را به html تشبیه کنید.

حالا در فایل index.html کد های زیر را به دقت وارد کنید:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”1.css”>
</head>
<body>
<div class=”container”>
<h1 class=”title”>تایمر</h1>
<div class=”div”>
<span class=”hour”>00</span> : <span class=”mintue”>00</span> : <span class=”second”>00</span>
</div>
<div>
<button onclick=”start()” class=”startbtn”>شروع</button>
<button onclick=”stop()” class=”stopbtn”>توقف</button>
<button onclick=”location.reload()” class=”resetbtn”>ریست</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>

تا این قسمت شما توانستید دکمه ها و متن ها یا همان ساختار سایت را بسازید. بعد html نوبت به css می رسد.

 css چیست و چه کاربردی دارد؟

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

با استفاده از CSS، شما می‌توانید نحوه نمایش و طرح بندی محتوای صفحات وب را بهبود بخشید و آن‌ها را جذاب‌تر و قابل فهم‌تر کنید. همچنین، با استفاده از CSS، می‌توانید تجربه کاربری کاربران خود را نیز بهبود بخشید و به آن‌ها کمک کنید که به سادگی با محتوای شما ارتباط برقرار کنند.

به عنوان مثال، با استفاده از CSS می‌توانید یک منوی ناوبری دلخواه با استایل و ظاهر دلخواه طراحی کنید، رنگ‌ها و فونت‌های متفاوتی برای متن‌های مختلف در صفحات خود اعمال کنید و یا تصاویر و ویدئوهای خود را با استفاده از CSS به عنوان پس زمینه صفحات خود نشان دهید.

بیشتر بخوانید:آموزش برنامه نویسی به زبان c

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

فایل style.css را باز کنید و کد های زیر را در آن وارد کنید:

*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family:’vazir’ ;
}
body{
    background: #2876cf;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    width: 450px;
    height: 450px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: timer 1s linear infinite paused;
    margin-top: 250px;
}
.title{
    font-size: 45px;
}
.container .div{
    font-size: 58px;
}
.container butteon{
    border: none;
    outline: none;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    border: 2px solid #f5f5f5;
    margin: 15px 7px 0 7px;
    font-size: 22px;
    transition: 0.5s;
}
button{
    padding: 10px;
    background-color: rgb(35, 119, 228);
    border-radius: 10px;
    border: none;
    font-size: 22px;
}
.startbtn{
    color: #fff;
}
.resetbtn{
    color: #fff;
}
.stopbtn{
    color: #fff;
}
.container button:hover{
    background: #daeb41;
    color: #000;
}
@keyframes timer {
    100%{box-shadow: 0px 0px 0px 0px #8739f9;}
}

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

شما بعد از طی نمودن مراحل بالا موفق شدید که یک تایمر بسازید. برای ساخت تایمر با جاوا اسکریپت در این مرحله باید کد جاوا اسکریپت را وراد کنید. بعد از html,css  زبان جاوا اسکریپت بسیار مهم و کاربردی است. شما میتوانید به کمک جاوا اسکریپت برای وب سایت خود رفتار های مختلفی را تعریف کنید. برای مثال شما یک فروشگاه اینترنتی را تصور کنید زمانی که کاربر رو دکمه افزودن به سبد خرید کلیک می کند، آن محصول به سبد خرید کاربر اضافه می شود این کار با جاوا اسکریپت انجام می شود.

بعد از توضیحات در مورد جاوا اسکریپت، نوبت به آن رسیده که فایل script.js را باز کرده و کد های زیر را در آن وارد کنید.

کد جاوا اسکریپت:

let h = document.querySelector(‘.hour’);
let m = document.querySelector(‘.mintue’);
let s = document.querySelector(‘.second’);
let startbtn = document.querySelector(‘.startbtn’);
let container = document.querySelector(‘.container’);
let hh = 0 ; let mm = 0 ;
let ss = 0 ;
let interval;
در این قسمت شما کلاس هایی که در html نام گذاری کردید، در متغیر جاوا اسکریپت ذخیره می کنید.
function stop(){
    clearInterval(interval);
    container.getElementsByClassName.animationPlayState = “paused”;
}
function less10(val , elm){
    if(val < 10){
        elm.innerHTML = “0” + val;
    }else{
        elm.innerHTML = val ;
    }
}
شما یک تایع به نام stop ایجاد کرده اید. زمانی که بر روی دکمه توقف کلیک کنید،این تابع اجرا می شود.
function start(){
    interval = setInterval(function(){
        container.style.animationPlayState = “running”;
        if(ss < 59){
            ss += 1;
            less10(ss,s);
        }else{
            ss = 0
            if(mm < 59){
                mm += 1;
                less10(mm,m);
            }else{
                hh += 1;
                less10(hh,h);
            }
        }
    },1000)
}
 با کلیک بر روی دکمه شروع تابع strart اجرا می شود.

امیدوارم از این آموزش لذت برده باشید.

دیدگاهتان را بنویسید