<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Digital Clock with jQuery</title>
<style type="text/css">
#Date {
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
text-shadow:0 0 5px #00c6ff;
}
ul p {
display:inline;
font-size:14px;
text-align:center;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-shadow:0 0 5px #00c6ff;
}
#point {
position:relative;
-moz-animation:mymove 1s ease infinite;
-webkit-animation:mymove 1s ease infinite;
padding-left:10px;
padding-right:10px;
}
@-webkit-keyframes mymove {
0% {
opacity:1.0;
text-shadow:0 0 20px #00c6ff;
}
50% {
opacity:0;
text-shadow:none;
}
100% {
opacity:1.0;
text-shadow:0 0 20px #00c6ff;
}
}
@-moz-keyframes mymove {
0% {
opacity:1.0;
text-shadow:0 0 20px #00c6ff;
}
50% {
opacity:0;
text-shadow:none;
}
100% {
opacity:1.0;
text-shadow:0 0 20px #00c6ff;
}
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var monthNames = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"];
var dayNames = ["อาทิตย์", "จันทร์", "อังคาร", "พุธ", "พฤหัสบดี", "ศุกร์", "เสาร์"]
var newDate = new Date();
newDate.setDate(newDate.getDate());
// แสดงผล วัน วันที่ เดือน ปี
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + (newDate.getFullYear() + 543));
//เชค ถ้าน้อยกว่า 10 ให้ใส่ 0 ข้างหน้า
setInterval(function () {
var seconds = new Date().getSeconds();
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function () {
var minutes = new Date().getMinutes();
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function () {
var hours = new Date().getHours();
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
</script>
</head>
<body>
<div id="Date"></div>
<ul style="margin:0 auto; padding:0px; list-style:none; text-align:center;">
<p id="hours"></p>
<p id="point">:</p>
<p id="min"></p>
<p id="point">:</p>
<p id="sec"></p>
</ul>
</body>
</html>
Load balance : Server 00
