Website HTML Javascript Clock (Date and Time)
Description
- This generator allows you to create the Javascript code necessary to put a text clock on your website that can display the current time (and date). The clock keeps updating in real time. Multiple time and date formats to choose from.
Steps
- Select how you want your clock/calendar to look
- Generate the HTML and JavaScript code for your clock (button at bottom)
- Preview your clock at the bottom above the code
- Copy and Paste the Source Code into your HTML page
Note
- If you want to change the size, font, or color you can edit the first line of your generated code and add a style="" property like: <div id="clockbox" style="font:14pt Arial; color:#FF0000;"></div>
Source Code:
<div id="clockbox"></div>
<script type="text/javascript">
var tday=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var tmonth=["January","February","March","April","May","June","July","August","September","October","November","December"];
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
var clocktext=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
document.getElementById('clockbox').innerHTML=clocktext;
}
GetClock();
setInterval(GetClock,1000);
</script>
Your Preveiw : Day , Date, Year , Current Time