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>
Load balance : Server 05
