003.
<head>
004.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
005.
<title>Untitled Document</title>
006.
<div align=
"center"
>
007.
<script type=
"text/javascript"
>
008.
function
date_time(id) {
009.
date
=
new
Date
;
010.
year =
date
.getFullYear();
011.
month =
date
.getMonth();
012.
months =
new
Array(
'มกราคม'
,
'กุมภาพันธ์'
,
'มีนาคม'
,
'เมษายน'
,
'พฤษภาคม'
,
'มิถุนายน'
,
'กรกฎาคม'
,
'สิงหาคม'
,
'กันยายน'
,
'ตุลาคม'
,
'พฤศจิกายน'
,
'ธันวาคม'
);
013.
d =
date
.
getDate
();
014.
day =
date
.getDay();
015.
days =
new
Array(
'วัน อาทิตย์ ที่'
,
'วัน จันทร์ ที่'
,
'วัน อังคาร ที่'
,
'วัน พุธ ที่'
,
'วัน พฤหัสดี ที่'
,
'วัน ศุกร์ ที่'
,
'วัน เสาร์ ที่'
);
016.
h =
date
.getHours();
017.
if
(h < 10) {
018.
h =
"0"
+ h;
019.
}
020.
m =
date
.getMinutes();
021.
if
(m < 10) {
022.
m =
"0"
+ m;
023.
}
024.
s =
date
.getSeconds();
025.
if
(s < 10) {
026.
s =
"0"
+ s;
027.
}
028.
result =
''
+ days[day] +
' '
+ d +
' '
+ months[month] +
' '
+ year +
' '
+ h +
':'
+ m +
':'
+ s;
029.
document.getElementById(id).innerHTML = result;
030.
setTimeout(
'date_time("'
+ id +
'");'
,
'1000'
);
031.
return
true;
032.
}
033.
034.
</script>
035.
<span id=
"date_time"
style=
"color: #000000; font-size:70px"
></span>
036.
<span id=
"date_time"
style=
"color: #000000; font-size:70px; font:'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
></span>
037.
<script type=
"text/javascript"
> window.onload = date_time(
'date_time'
);</script>
038.
</head>
039.
040.
<body>
041.
042.
<style type=
'text/css'
>
043.
.CountBox{
044.
display:block;
045.
margin: auto;
046.
width: 95%;
047.
height: 300px;
048.
margin-top:50px;
049.
background:gray;
050.
color:white;
051.
padding:0.6em;
052.
text-align:center;
053.
}
054.
.row{
055.
display:block;
056.
width:100%;
057.
margin:auto;
058.
padding-bottom:0.2em;
059.
}
060.
.Box ,.sBox{
061.
width:33%;
062.
display:inline-block;
063.
text-align:center;
064.
font-size:10em;
065.
height:1.2em;
066.
}
067.
.sBox{
068.
font-size:4em;
069.
vertical-align: baseline;
070.
text-align:center;
071.
height:1.0em;
072.
}
073.
</style>
074.
<div
class
=
'CountBox'
>
075.
<div
class
=
'row'
>
076.
<div
class
=
'Box'
id=
'CountHours'
></div>
077.
<div
class
=
'Box'
id=
'CountMinutes'
></div>
078.
<div
class
=
'Box'
id=
'CountSecond'
></div>
079.
</div>
080.
<div
class
=
'row'
>
081.
<div
class
=
'sBox'
>ชั่วโมง</div>
082.
<div
class
=
'sBox'
>นาที</div>
083.
<div
class
=
'sBox'
>วินาที</div>
084.
</div>
085.
</div>
086.
088.
<script>
089.
090.
091.
function
lpad(value, length) {
092.
return
(value.toString().length < length) ? lpad(
"0"
+value, length):value;
093.
}
094.
095.
$(document).ready(
function
(){
096.
var
hrs=$(
"#CountHours"
),
097.
min=$(
"#CountMinutes"
),
098.
sec=$(
"#CountSecond"
),
099.
Hrs=0,Min=0,Sec=0;
100.
101.
hrs.text(lpad(
'<?php echo $_POST["hours"];?>'
,2)+
':'
);
102.
min.text(lpad(
'<?php echo $_POST["minutes"]-1;?>'
,2)+
':'
);
103.
sec.text(
'60'
);
104.
var
CountDown = setInterval(
function
(){
105.
Sec=parseInt(sec.text())-1;
106.
Min=parseInt(min.text());
107.
Hrs=parseInt(hrs.text());
108.
if
(Sec<0){
109.
Sec=59;
110.
--Min;
111.
min.text(lpad(Min,2)+
':'
);
112.
}
113.
if
(Min<0 && Hrs>0){
114.
--Hrs;
115.
Min=59;
116.
Sec=59;
117.
hrs.text(lpad(Hrs,2)+
':'
);
118.
min.text(lpad(Min,2)+
':'
);
119.
}
120.
sec.text(lpad(Sec,2));
121.
if
(Min<=0 && Hrs<=0 && Sec<=0){
122.
clearInterval(CountDown);
123.
124.
126.
snd.play();
127.
alert(
'Finish CountDown'
);
128.
}
129.
130.
},1000);
131.
132.
});
133.
</script>
134.
135.
136.
</body>
137.
</html>