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
Nế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
<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>
<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>
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>