Get Free Online Courses 2020 Lecture Graphics Design, AutoCAD, Adobe Photoshop, SEO, Freelancing and Other Tip To Get Advance Course at samiskills

Breaking

Friday, February 15, 2019

Website HTML Javascript Clock (Date and Time)

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

  1. Select how you want your clock/calendar to look
  2. Generate the HTML and JavaScript code for your clock (button at bottom)
  3. Preview your clock at the bottom above the code
  4. 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

Pages