A jQuery Timey-Wimey Indicator 2
A "time indicator" I wrote after finding a 5 year old, unresolved topic on the jQuery forums asking to turn a JavaScript code into jQuery.
by Emily Humphrey
October 28, 2012
HTML
<div id="contain">
<div id="are-we-open"></div>
<div id="main">
We're open from 9am to 5pm, Monday through Friday.
It is currently <span id="insert-time"></span> on a <span id="insert-day"></span> <span id="insert-interval"></span>.
</div>
</div>
CSS
body{
font-family:sans-serif;
font-size:16px;
background:#eee;
color:#222;
}
#contain{
display:block;
margin:20px auto;
width:440px;
}
#are-we-open{
display:block;
width:400px;
padding: 20px;
border-radius: 8px 8px 0px 0px;
text-align:center;
color:#fff;
}
.open{
background:#819571;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#819571), to(#687D5B));
background-image: -webkit-linear-gradient(top, #819571, #687D5B);
background-image: -moz-linear-gradient(top, #819571, #687D5B);
background-image: -ms-linear-gradient(top, #819571, #687D5B);
background-image: -o-linear-gradient(top, #819571, #687D5B);
text-shadow: 1px 2px #4E5F3B;
border:#687D5B 1px solid;
}
.closed{
background:#933C35;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#933C35), to(#C44943));
background-image: -webkit-linear-gradient(bottom, #933C35, #C44943);
background-image: -moz-linear-gradient(bottom, #933C35, #C44943);
background-image: -ms-linear-gradient(bottom, #933C35, #C44943);
background-image: -o-linear-gradient(bottom, #933C35, #C44943);
text-shadow: 1px 2px #742D26;
border:#933C35 1px solid;
}
#main{
display:block;
width:400px;
padding: 20px;
background:#fff;
border:#fff 1px solid;
text-align:center;
line-height:24px;
box-shadow: 0px 4px 3px -3px #888;
}
JavaScript
day = new Date();
time = day.getTime();
day.setTime(time);
hour = day.getHours();
today = day.getDay();
if ((today >= 1) && (today <= 5))
if ((hour >= 9) && (hour <=17))
$('div#are-we-open')
.addClass('open')
.append('We\'re Open! Give us a call!');
else
$('div#are-we-open')
.addClass('closed')
.append('We\'re Closed! Give us a call tomorrow!');
else
$('div#are-we-open')
.addClass('closed')
.append('We\'re Open! Give us a call tomorrow!');
if(hour === 0)
$('span#insert-time').append('12 am');
else if (hour === 1)
$('span#insert-time').append('1 am');
else if (hour === 2)
$('span#insert-time').append('2 am');
else if (hour === 3)
$('span#insert-time').append('3 am');
else if (hour === 4)
$('span#insert-time').append('4 am');
else if (hour === 5)
$('span#insert-time').append('5 am');
else if (hour === 6)
$('span#insert-time').append('6 am');
else if (hour === 7)
$('span#insert-time').append('7 am');
else if (hour === 8)
$('span#insert-time').append('8 am');
else if (hour === 9)
$('span#insert-time').append('9 am');
else if (hour === 10)
$('span#insert-time').append('10 am');
else if (hour === 11)
$('span#insert-time').append('11 am');
else if (hour === 12)
$('span#insert-time').append('12 pm');
else if (hour === 13)
$('span#insert-time').append('1 pm');
else if (hour === 14)
$('span#insert-time').append('2 pm');
else if (hour === 15)
$('span#insert-time').append('3 pm');
else if (hour === 16)
$('span#insert-time').append('4 pm');
else if (hour === 17)
$('span#insert-time').append('5 pm');
else if (hour === 18)
$('span#insert-time').append('6 pm');
else if (hour === 19)
...