جستجو برای:
سبد خرید 0
  • آموزش رایگان لایت کالج
  • وبلاگ
  • دوره های آموزشیداغ
    • طراحی سایت
    • برنامه نویسی
    • شبکه های اجتماعیتخفیف
    • آفیس office
    • دیجیتال مارکتینگ
    • فناوری اطلاعات
    • شبکه و امنیت
  • مجله آموزشی
  • تماس با ما
  • درباره ی ما
  • خدمات دیگر ماجدید
    • لایت کمپانی
    • کار لایت
    • لایت جیم
  • 01144446044
  • info@lightcollege.ir
  • لایت کمپانی
  • علاقمندی ها
0
  • آموزش رایگان لایت کالج
  • وبلاگ
  • دوره های آموزشیداغ
    • طراحی سایت
    • برنامه نویسی
    • شبکه های اجتماعیتخفیف
    • آفیس office
    • دیجیتال مارکتینگ
    • فناوری اطلاعات
    • شبکه و امنیت
  • مجله آموزشی
  • تماس با ما
  • درباره ی ما
  • خدمات دیگر ماجدید
    • لایت کمپانی
    • کار لایت
    • لایت جیم
ورود
با ما در تماس باشید
ورود
0 تومان 0 سبد خرید
  • آموزش رایگان لایت کالج
  • وبلاگ
  • دوره های آموزشیداغ
    • طراحی سایت
    • برنامه نویسی
    • شبکه های اجتماعیتخفیف
    • آفیس office
    • دیجیتال مارکتینگ
    • فناوری اطلاعات
    • شبکه و امنیت
  • مجله آموزشی
  • تماس با ما
  • درباره ی ما
  • خدمات دیگر ماجدید
    • لایت کمپانی
    • کار لایت
    • لایت جیم

وبلاگ

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

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

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 اجرا می شود.

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

قبلی آموزش اسمبل کردن کامپیوتر(فیلم آموزشی رایگان)
بعدی RGB رنگ مورد علاقت رو پیدا کن

دیدگاهتان را بنویسید لغو پاسخ

جستجو کنید!
جستجو برای:
دسته‌ها
  • office
  • آکادمی
  • اسمبل کیس
  • امنیت و شبکه
  • بدون دسته بندی
  • برنامه نویسی
  • پاورپوینت
  • ترفند
  • سئو
  • سیستم مدیریت محتوا
  • طراحی
  • طراحی سایت
  • کدنویسی
  • کسب و کار
  • وردپرس
  • ووکامرس
پشتیبانی
  • خانه
  • دوره های آموزشی
  • وبلاگ
  • درباره ی ما
  • تماس با ما
Telegram Whatsapp Instagram

درباره ی لایت کالج

در وبسایت ما، مجموعه‌ای از دوره‌های رایگان برای شروع یادگیری برنامه‌نویسی وجود دارد تا هر کسی بتواند بدون هزینه، مهارت‌های اولیه را کسب کند. همچنین، برای کسانی که به دنبال آموزش‌های پیشرفته و تخصصی هستند، دوره‌های حرفه‌ای و جامع با هزینه‌ای مناسب ارائه می‌شود.

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

به ما بپیوندید و برنامه نویسی را به سبک جدید یاد بگیرید!

دسته بندی ها

  • طراحی سایت
  • برنامه نویسی
  • برنامه نویسی تحت ویندوز
  • آفیس
  • الکترونیک

قوانین و مقررات

  • قوانین و مقررات کلی سایت
  • قوانین پرداخت
  • قوانین بازگشت وجه

پرفروش ترین محصولات

  • آموزش زبان برنامه نویسی C
  • آموزش فتوشاپ فشرده
  • آموزش رایگان اکسل
  • آموزش رایگان پاورپوینت

جدیدترین مقالات

تست امنیت وب سایت

تست امنیت سایت؛ چرا و چگونه امنیت وب ‌سایت خود را بررسی کنیم؟

هکر کیست؟

هکر چیست و انواع آن کدام است؟

مهندسی اجتماعی چیست؟

مهندسی اجتماعی چیست؟ آشنایی با روش های یکی از خطرناک‌ترین روش‌های هک

آسیب پیذیری چیست؟

آسیب‌پذیری چیست؟؛ بررسی کامل Vulnerability در امنیت سایبری

011-44446044

09116430304

آمل، خیابان هراز، آفتاب 18، پلاک 12

دسته بندی ها

  • طراحی سایت
  • برنامه نویسی
  • برنامه نویسی تحت ویندوز
  • آفیس
  • الکترونیک

قوانین و مقررات

  • قوانین و مقررات کلی سایت
  • قوانین پرداخت
  • قوانین بازگشت وجه

پرفروش ترین محصولات

  • آموزش زبان برنامه نویسی C
  • آموزش فتوشاپ فشرده
  • آموزش رایگان اکسل
  • آموزش رایگان پاورپوینت

جدیدترین مقالات

تست امنیت وب سایت

تست امنیت سایت؛ چرا و چگونه امنیت وب ‌سایت خود را بررسی کنیم؟

هکر کیست؟

هکر چیست و انواع آن کدام است؟

مهندسی اجتماعی چیست؟

مهندسی اجتماعی چیست؟ آشنایی با روش های یکی از خطرناک‌ترین روش‌های هک

آسیب پیذیری چیست؟

آسیب‌پذیری چیست؟؛ بررسی کامل Vulnerability در امنیت سایبری

011-44446044

09116430304

آمل، خیابان هراز، آفتاب 18، پلاک 12

  • تمامی قوانین متعلق به وبسایت لایت کالج میباشد.
  • طراحی سایت و سئو : لایت کمپانی
ورود
با شماره موبایل
آیا هنوز عضو نشده اید؟ اکنون ثبت نام کنید
بازنشانی رمزعبور
با شماره موبایل
ثبت نام
قبلا عضو شده اید؟ اکنون وارد شوید
محافظت شده توسط