Here is what I did:
window.onload = function() { //draw the clock when the page loads draw_clock('current_time', 1); } function get_current_time() { //create a new date object and get current hours, minutes and seconds var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); //add a leading 0 (zero) to those which are one digit if(h < 10) h = "0" + h; if(m < 10) m = "0" + m; if(s < 10) s = "0" + s; return h+":"+m+":"+s; } function draw_clock(id) { //create the div that will hold the clock var clock = document.createElement('div'); clock.id = id; //you can change the style of the clock ie to position it at a specific place on the page //i'll put this one approximately in the center of the page, but you can adjust that to fit your needs clock.style.position = 'absolute'; clock.style.left = '50%'; clock.style.top = '50%'; clock.style.marginLeft = '-50px'; clock.style.marginTop = '-20px'; //get the current time and set it as div's innerHTML, using a function that formats it to look good on the page clock.innerHTML = get_clock_innerHTML(get_current_time()); //add the element to the page document.body.appendChild(clock); //set the timer which will update the clock. The interval can also be set to more that a second. //If you need to update the time in another interval of time, say 15 seconds, you can use 15000 as the second argument to setInterval() setInterval("clock_current_time('"+id+"')", 1000); } function get_clock_innerHTML(time) { //an array that stores the symbols which draw the good old-fashioned digital clock :) //IMPORTANT: don't change the alignment or anything else on this array, cause this will cause the clock to look uglier, or even not work var digits = " _ _ _ _ _ _ _ _ "+ "| | | _| _||_||_ |_ | |_||_| . "+ "|_| | |_ _| | _||_| | |_| _| . "+ " "; //put the symbols inside a <pre> tag to make sure they will be displayed just like they are written in the array. //you can also change the style settings i've set var data = "<pre><span style='color: #000; background: #ccc; font-size: 10px;'>"; //loop trough the four 'rows' of the array and display the appropriate symbols for(r = 0; r < 100; r += 33) { for(i = 0; i < time.length; i++) { for(c = (time[i])*3 + r , b = 0; b < 3; b++, c++) { if(isNaN(c)) c = 10*3+r; data += digits[c]; } } data += "<br />"; } data += "</span></pre>"; return data; } function clock_current_time(id) { //get the new time and change the innerHTML of the clock document.getElementById(id).innerHTML = get_clock_innerHTML(get_current_time()); }Now you know what time it is* :) You can see a preview here and download the code from here.
*Does anyone know what "it" means in the sentence "What time is it?" :)
No comments:
Post a Comment