»
EnglishFrenchVietnamese

Print - jsClock: Featured Digital Clock JavaScript - JavaScriptBank.com

Full version: jsB@nk » Time » Clock » jsClock: Featured Digital Clock JavaScript
URL: https://www.javascriptbank.com/jsclock-featured-digital-clock-javascript.html

jsClock: Featured Digital Clock JavaScript © JavaScriptBank.comIf you're needing a simple digital clock that is updating automatically and takes directly the time from the server, also you want to show the time in other countries to have a reference. Then why you should not take a preview of this digital clock JavaScript, because its simple, super easy to use and modify. This free digital clock JavaScript code has some options: many layouts for choosing, time JavaScript using server, manual-handle clock using JavaScript like a countdown clock JavaScript.

Full version: jsB@nk » Time » Clock » jsClock: Featured Digital Clock 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>