http://www.nwktc.edu/maed/appdevcountdown.html
There are a couple of things to note about the countdown.
- It is set to general mountain time so the -0600 Time Stamp
- The font automatically changes size to the width of the window
- It detects when the day occurs and changes from until class starts to Since Class Began.
<script>
//This is the date we are counting down to.
var dateClassStarts = new Date("August 12, 2013 7:59:00 -0600");
$(document).ready(function(){
//Write out the original Difference in time.
writeOutTime();
//Size the font to the window.
resizeFontToWindow();
//Update the timer every second.
setInterval(writeOutTime,1000);
});
//If the window resizes, we want the font to change.
$(window).resize(function(){
resizeFontToWindow();
});
function writeOutTime(){
//Get new Time
var currentTime = new Date();
//Calculate the entire difference in milliseconds.
var difference = dateClassStarts - currentTime;
//Determine if the class is in the future or the past.
var classHasStarted = false;
if (difference < 0) {
classHasStarted = true;
}
//Take the absolute value so you always have positive values.
difference = Math.abs(difference);
//86400000 is 1000 * 60 * 60 * 24
//Calculate the Days, Hours, Minutes, and Seconds.
//Note the use of the floor so it ignores the remainder.
var days = Math.floor(difference/86400000);
difference -= days * 86400000;
var hours = pad(Math.floor(difference/ 3600000),2);
difference -= hours * 3600000;
var minutes = pad(Math.floor(difference / 60000),2);
difference -= minutes * 60000;
var seconds = pad(Math.floor(difference / 1000),2);
//Put the String together.
var dataString = days + " Days<br> " + hours + ":" + minutes + ":" + seconds + "<br >";
//Add to the string if the class has begun or not.
if (classHasStarted) {
dataString += "Since Class Began";
}else{
dataString += "Until Class Starts";
}
//update your label
$("#label").html(dataString);
}
function resizeFontToWindow()
{
//Get the Width of the Div that holds the label
var widthOfLabelDiv = $("#label").width();
//Calculate a new font size based off that width
var newFontSize = widthOfLabelDiv / 9;
//Animate to that new size in 100 milliseconds
$("#label").animate({
fontSize: newFontSize + "px"
},100);
}
//Changes the numbers so that they are 05 instead of 5 when you have a size of 2.
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
</script>
No comments:
Post a Comment