no-img
اِمیلاسلام کاربر مهمان. امروز دوشنبه ۲۷ آبان ۱۳۹۸


ادامه مطلب

انتشار؛ ۰۸ شهریور ۱۳۹۸،
80 روز پیش
ساخت ساعت دیجیتال با جاوا اسکریپت
امتیاز 5.00 ( 6 رای )
حمایت از emila.ir

ساخت ساعت دیجیتال با جاوا اسکریپت

انتشار؛ ۰۸ شهریور ۱۳۹۸ - 80 روز پیش

برای ساختن ساعت دیجیتال سه مرحله وجود دارد:

(پیش نمایش چیزی که در انتهای کار خواهیم ساخت را  از اینجا ببینید – کلیک کنید)

  1. ساختن بدنه ی html ساعت.
  2. نوشتن چند خط جاوا اسکریپت ساده.
  3. نوشتن چند خط css برای یک استایل ساده به ساعت!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myClock{
padding:5px;
border:1px dashed #333;
text-align:center;
}
#myClock span{
padding:5px;
font:normal 15px cursive;
}
#blink{
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
</style>
</head>
<body>
<time id="myClock" datetime="">
<span id="hour"></span>
<span>:</span>
<span id="minute"></span>
<span id="blink">:</span>
<span id="second"></span>
</time>
<script>
//get elements
function getElem(id){
return document.getElementById(id);
}
//attach 0 to under 10 digits
function digitConfig(digit){
if(digit<10){
return '0'+digit;
}
return digit;
}
//produce time and add it into clock
function beginClock(){
//create date obj
var date=new Date();
//covert to jalali
//var JalaliDate=gregorianToJalali(date.getFullYear(),date.getMonth(),date.getDate());
var hourElem=getElem('hour');
var minuteElem=getElem('minute');
var secondElem=getElem('second');
var myClock=getElem('myClock');
myClock.setAttribute('datetime',date.toUTCString());
hourElem.innerHTML=digitConfig(date.getHours());
minuteElem.innerHTML=digitConfig(date.getMinutes());
secondElem.innerHTML=digitConfig(date.getSeconds());
}
//start clock
beginClock();
setInterval('beginClock()',500);
</script>
</body>
</html>

منبع: tarhche


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=17568
designer