Here is the code:
window.onload = function() { //draw the clock when the page loads draw_clock('counter'); } 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'; //set a starting time for the counter. clock.time = '00:00:00'; //display the time as div's innerHTML, using a function that formats it to look good on the page clock.innerHTML = get_clock_innerHTML(clock.time); //append the clock to the page document.body.appendChild(clock); //start a timer that will update the counter every second. You cam use other intervals if you need to setInterval("clock_counter('"+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_counter(id) { var clock = document.getElementById(id); //split the time into hours, minutes and seconds var tmp = clock.time.split(":"); var hours = tmp[0]; var minutes = tmp[1]; var seconds = tmp[2]; //if the seconds and/or minutes are about to pass 59 - increase the minutes/hours and set seconds/minutes back to zero. if(seconds == 59) { if(minutes == 59) { hours++; minutes = '00'; seconds = '00'; } else { minutes++; seconds = '00'; } } else //otherwise just increase the seconds untill they reach 60 seconds++; //update the var that holds the time clock.time = ((hours < 10) ? "0"+parseInt(hours) : hours)+ ":"+ ((minutes < 10) ? "0"+parseInt(minutes) : minutes) + ":"+ ((seconds < 10) ? "0"+parseInt(seconds) : seconds); //and update the innerHTML of clock's div clock.innerHTML = get_clock_innerHTML(clock.time); }Make sure your users know how long they've been on the page, they have to eat from time to time, you know ;) You can see a demo here and get the code from here.
1 comment:
What I want to do is display a counter (or clock) that counts dime in decimal units. Tenths of days, hundredths of days, etc. How might I do this?
Post a Comment