»
Tiếng AnhTiếng PhápTiếng Việt

In - jsClock: Đồng hồ số tiện dụng với JavaScript - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » jsClock: Đồng hồ số tiện dụng với JavaScript
URL: https://www.javascriptbank.com/jsclock-featured-digital-clock-javascript.html

jsClock: Đồng hồ số tiện dụng với JavaScript © JavaScriptBank.comNếu bạn đang cần một hiệu ứng đồng hồ đơn giản nhưng có những tính năng cao cấp như: nhiều giao diện để thay đổi, cập nhật thời gian trực tiếp từ máy chủ, thời gian tự điều chỉnh, hiển thị thời gian ở các quốc gia khác thì có lẽ bạn nên dành một chút thời gian để xem cách thức hoạt động của hiệu ứng JavaScript về đồng hồ này.

Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » jsClock: Đồng hồ số tiện dụng với JavaScript
URL: https://www.javascriptbank.com/jsclock-featured-digital-clock-javascript.html



CSS
<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.clock{cursor:pointer;padding:5px 5px 5px 5px;margin:5px 0 5px 0;width:70px;-webkit-border-bottom-right-radius: 4px;-webkit-border-bottom-left-radius: 4px;-webkit-border-top-right-radius: 4px;-webkit-border-top-left-radius: 4px;-moz-border-radius-bottomright: 4px;-moz-border-radius-bottomleft: 4px;-moz-border-radius-topright: 4px;-moz-border-radius-topleft: 4px;text-align:center;font-weight: bold;font-family: arial;}#clock { background-color:#000000;color:#00CC66; }#reloj { background-color:#999999;color:#FFFFFF; }#rellotje { background-color:#237ab2;color:#FFFFFF; }</style>


JavaScript
<script type="text/javascript">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/function moveClock(idClock,startTime){//move given clockvar timeout=1000;//miliseconds to repeat the functionif ( startTime === undefined ) {//just take the browser time    rightNow = new Date();hour = rightNow.getHours();minute = rightNow.getMinutes();second = rightNow.getSeconds();}else{//starttime setrightNow = startTime.split(':',3);hour = parseInt(rightNow[0],10);minute =  parseInt(rightNow[1],10);second =  parseInt(rightNow[2],10);if (second==59){if (minute==59){if (hour==23) hour=0;else hour++;minute=0;}else minute++;second=0;}else second++;}if (minute<10) minute= "0" + minute;if (second<10) second= "0" + second;currentTime=hour + ":" + minute + ":" +second;// tim to returndocument.getElementById(idClock).innerHTML = currentTime;//tim for the HTML element//recursivityif (startTime===undefined) setTimeout("moveClock('"+idClock+"')",timeout);//browser timeelse setTimeout("moveClock('"+idClock+"','"+currentTime+"')",timeout);//set time}</script>


HTML
Normal clock using browser time: <div id="clock" class="clock">clock</div>moveClock("clock");<br /><br /><hr>Clock using server time:<div id="reloj" class="clock">reloj</div>  moveClock("reloj","< ?php echo date("G:i:s");? >");<br /><br /><hr>Clock with manual time: <div id="rellotje" class="clock">rellotje</div> moveClock("rellotje","23:58:56");<br /><br /><hr><script  type='text/javascript'>moveClock("clock");moveClock("reloj","2:23:25");moveClock("rellotje","23:58:56");</script>