JavaScriptBank
06-05-2010, 03:57 AM
This digital clock JavaScript code (http://www.javascriptbank.com/javascript/) attempts to parody that cool 'glowing in the dark night' look of a LCD clock watch by its interface. LCD (http://www.javascriptbank.com/=LCD) displays the ... detail (http://www.javascriptbank.com/lcd-digital-clock.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/time/lcd-digital-clock.jpg (http://www.javascriptbank.com/javascript/time/clock-time-date/lcd-digital-clock/preview/en/)
Demo: JavaScript LCD Digital Clock (http://www.javascriptbank.com/lcd-digital-clock.html/en/)
How to setup
Step 1: Place CSS below in your HEAD section
CSS
<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
*****************************************/
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
//-->
</script>
Step 3: Place HTML below in your BODY section
HTML
<span id="digitalclock" class="styling"></span>
AJAX news ticker (http://www.javascriptbank.com/rss-ajax-newsticker.html) - JavaScript Refresh Page (http://www.javascriptbank.com/refresh-page-automatic.html/en/) - JavaScript Unclosable Window (http://www.javascriptbank.com/blink.html)
http://www.javascriptbank.com/javascript.images/time/lcd-digital-clock.jpg (http://www.javascriptbank.com/javascript/time/clock-time-date/lcd-digital-clock/preview/en/)
Demo: JavaScript LCD Digital Clock (http://www.javascriptbank.com/lcd-digital-clock.html/en/)
How to setup
Step 1: Place CSS below in your HEAD section
CSS
<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
*****************************************/
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
//-->
</script>
Step 3: Place HTML below in your BODY section
HTML
<span id="digitalclock" class="styling"></span>
AJAX news ticker (http://www.javascriptbank.com/rss-ajax-newsticker.html) - JavaScript Refresh Page (http://www.javascriptbank.com/refresh-page-automatic.html/en/) - JavaScript Unclosable Window (http://www.javascriptbank.com/blink.html)