خلاقیت با جاوااسکریپت : HEXCLOCK

در این مقاله به انجام یک پروژه عملی با استفاده از جاوااسکریپت میپردازیم. عنوان پروژه ما HEXCLOCK بوده و اگر بخواهیم بیشتر درمورد آن توضیح دهیم، صفحه وبی را درنظر بگیرید که ساعت سیستم را هر ثانیه گرفته و آنرا نمایش دهد. همانطور که میدانید میتوان از اعداد هگزادسیمال برای تایین رنگ صفحات وب استفاده کرد و این اعداد هگزادسیمال بصورت ۶ رقمی میباشند. همچنین اگر به یک ساعت دیجیتال دقت کنید میبینید که آن اعداد آن هم با در نظر گرفتن ثانبه ۶ رقم هست مثلا ساعت ۰۱:۱۵:۳۶٫

حالا میخواهیم صفحه وبی طراحی کنیم که ساعت سیستم را هر ثانیه دریافت کند و نمایش دهد و آنرا به عدد هگزادسیمال تبدیل کند و به این ترتیب رنگ صفحه را با آن عدد هگزادسیمال تغییر دهد. مثلا اگر ساعت ۰۱:۱۵:۳۶ باشد آنرا به عدد #۰۱۱۵۳۶ تبدیل کند و رنگ معادل را به صفحه اعمال کند و هر ثانیه این کار تکرار شود.

کارمان را با ایجاد فایلهای مورد نیاز شروع میکنیم. یک فایل html به نام index.html، یک فایل استایل style.css و یک فایل جاوااسکریپت به نام app.js

همانطور که میبینید ما یک ساعت در مرکز صفحه داریم و زیر آن ساعت یک متن که رنگ صفحه را بصورت هگزادسیمال نمایش میدهد. ابتدا این موارد بصورت بسیار ساده با کدهای html بین تگ های body در فابل index.html اضافه میکنیم:

<h1 id="clock"> 00:00:00 </h1>
<p id="hexcolor">#000000</p>

1 2	<h1 id="clock"> 00:00:00 </h1> <p id="hexcolor">#000000</p>

سپس زیر این کدها سورس فایل app.js را اضافه میکنیم تا فایلها به هم لینک شوند:

<script src="js/app.js" type="text/javascript"></script>

1	<script src="js/app.js" type="text/javascript"></script>

همچنین index.html را باید به فایل style.css لینک کنیم:

<link rel="stylesheet" href="css/style.css" type="text/css">

1	<link rel="stylesheet" href="css/style.css" type="text/css">

بسیار خب حالا وارد فایل استایل میشویم و مقدرای استایل دهی میکنیم:

body{
font-family: cursive;
text-align: center;
color: #fff;
}
#clock{
font: bold 78px cursive;
margin-top: 200px;
padding: 10px;
}
#hexcolor{
font-size: 22px;
}

body{

font-family: cursive;

text-align: center;

color: #fff;

}

#clock{

font: bold 78px cursive;

margin-top: 200px;

padding: 10px;

}

#hexcolor{

font-size: 22px;

}

بسیار خب الان نوبت این میرسه که کارمون رو با اضافه کردن کدهای جاوااسکریپت در فایل app.js ادامه بدیم. ابتدای این فایل دوتا متغیر با نام های clock و hexcolor برای دسترسی به تگ های پاراگراف و h1 که مقادیر ساعت و رنگ هگزادسیمال مارا دربر داردند، بوسیله id هایی که به این عناصر در فایل index.html دادیم ایجاد میکنیم (توجه داشته باشید که متغیر clock برای ساعت بوده و hexcolor برای زنگ میباشد):

var clock = document.getElementById('clock');
var hexcolor = document.getElementById('hexcolor');

1 2	var clock = document.getElementById('clock'); var hexcolor = document.getElementById('hexcolor');

سپس یک فانکشن یا تابع برای دریافت و نمایش ساعت سیستم و ذخیره آن در متغیر جدیدی به نام clockstr، و تبدیل آن به عدد هگزادسیمال و تغییر زنگ صفحه به آن عدد،تعریف میکنیم. انتهای این تابع مقدار TextContent متغیر clock را برابر با clockstr و متغیر hexcolor را برابر با متغیر hexcolorstr میکنیم:

function hexClock(){
    var time = new Date();
    var hour = (time.getHours() %12 ).toString();
    var minute = time.getMinutes().toString();
    var second = time.getSeconds().toString();
    
    if(hour.length < 2){
        hour = "0" + hour;
    }
    
    if(minute.length < 2){
        minute = "0" + minute;
    }
    
    if(second.length < 2){
        second = "0" + second;
    }
    
    var clockstr = hour + ":" + minute + "." + second;
    var hexcolorstr = "#" + hour + minute + second;
    
    clock.textContent = clockstr;
    hexcolor.textContent = hexcolorstr;
    
    document.body.style.backgroundColor = hexcolorstr;
}

function hexClock(){

var time = new Date();

var hour = (time.getHours() %12 ).toString();

var minute = time.getMinutes().toString();

var second = time.getSeconds().toString();

if(hour.length < 2){

hour = "0" + hour;

}

if(minute.length < 2){

minute = "0" + minute;

}

if(second.length < 2){

second = "0" + second;

}

var clockstr = hour + ":" + minute + "." + second;

var hexcolorstr = "#" + hour + minute + second;

clock.textContent = clockstr;

hexcolor.textContent = hexcolorstr;

document.body.style.backgroundColor = hexcolorstr;

}

هم اکنون چون میخواهیم ساعت را هر ثانیه نمایش دهیم، در حقیقت باید این فانکشن را هر یک ثانیه یکبار اجرا کنیم پس این فانکشن را به شکل زیر داخل یک تابعی به نام setInterval() فراخوانی میکنیم:

setInterval(hexClock,1000);

1	setInterval(hexClock,1000);

به این ترتیب پروژه‌ما به پایان میرسه حال اگر صفحه رو رفرش کنیم باید پروژه‌ما به شکل زیر اجرا شود,از اینکه با ما همراه بودید متشکریم

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

خلاقیت با جاوااسکریپت : HEXCLOCK

معرفی چند تم بسیار زیبا برای اوبونتو لینوکس

نکات مهم قبل از یادگیری برنامه نویسی اندروید

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

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

ممکن است همچنین دوست داشته باشید

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