_x000D_
.clock {_x000D_
width: 260px;_x000D_
margin: 0 auto;_x000D_
padding: 30px;_x000D_
color: #FFF;background:#333;_x000D_
}_x000D_
.clock ul {_x000D_
width: 250px;_x000D_
margin: 0 auto;_x000D_
padding: 0;_x000D_
list-style: none;_x000D_
text-align: center_x000D_
}_x000D_
_x000D_
.clock ul li {_x000D_
display: inline;_x000D_
font-size: 3em;_x000D_
text-align: center;_x000D_
font-family: "Arial", Helvetica, sans-serif;_x000D_
text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff, 0 4px 7px #55c6ff_x000D_
}_x000D_
#Date { _x000D_
font-family: 'Arial', Helvetica, sans-serif;_x000D_
font-size: 26px;_x000D_
text-align: center;_x000D_
text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff;_x000D_
padding-bottom: 40px;_x000D_
}_x000D_
_x000D_
#point {_x000D_
position: relative;_x000D_
-moz-animation: mymove 1s ease infinite;_x000D_
-webkit-animation: mymove 1s ease infinite;_x000D_
padding-left: 10px;_x000D_
padding-right: 10px_x000D_
}_x000D_
_x000D_
/* Animasi Detik Kedap - Kedip */_x000D_
@-webkit-keyframes mymove _x000D_
{_x000D_
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}_x000D_
50% {opacity:0; text-shadow:none; }_x000D_
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } _x000D_
}_x000D_
_x000D_
@-moz-keyframes mymove _x000D_
{_x000D_
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}_x000D_
50% {opacity:0; text-shadow:none; }_x000D_
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } _x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>_x000D_
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>_x000D_
<script type="text/javascript">_x000D_
$(document).ready(function() {_x000D_
// Making 2 variable month and day_x000D_
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; _x000D_
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]_x000D_
_x000D_
// make single object_x000D_
var newDate = new Date();_x000D_
// make current time_x000D_
newDate.setDate(newDate.getDate());_x000D_
// setting date and time_x000D_
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());_x000D_
_x000D_
setInterval( function() {_x000D_
// Create a newDate() object and extract the seconds of the current time on the visitor's_x000D_
var seconds = new Date().getSeconds();_x000D_
// Add a leading zero to seconds value_x000D_
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);_x000D_
},1000);_x000D_
_x000D_
setInterval( function() {_x000D_
// Create a newDate() object and extract the minutes of the current time on the visitor's_x000D_
var minutes = new Date().getMinutes();_x000D_
// Add a leading zero to the minutes value_x000D_
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);_x000D_
},1000);_x000D_
_x000D_
setInterval( function() {_x000D_
// Create a newDate() object and extract the hours of the current time on the visitor's_x000D_
var hours = new Date().getHours();_x000D_
// Add a leading zero to the hours value_x000D_
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);_x000D_
}, 1000); _x000D_
});_x000D_
</script>_x000D_
<div class="clock">_x000D_
<div id="Date"></div>_x000D_
<ul>_x000D_
<li id="hours"></li>_x000D_
<li id="point">:</li>_x000D_
<li id="min"></li>_x000D_
<li id="point">:</li>_x000D_
<li id="sec"></li>_x000D_
</ul>_x000D_
</div>
_x000D_