how to display a custom greeting based on the day of the week
htmljavascriptdateDOMI discovered a cool little trick while source diving through Scott Mathson's web site. With just a couple lines of JavaScript you can create a message that displays a different greeting depending on the day of the week.
Create a script with a weekday array #
Create a <script>
tag with type
of text/javascript
. Define a variable called weekday
with a different greeting set to each index.
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "spectacular Sunday";
weekday[1] = "marvelous Monday";
weekday[2] = "terrific Tuesday";
weekday[3] = "wonderful Wednesday";
weekday[4] = "totally cool Thursday";
weekday[5] = "fantastic Friday";
weekday[6] = "sweet Saturday";
</script>
Set weekday value to the current date #
Also inside the script tag, create a variable called currentDate
set with the Date()
object and then set the current day to weekdayValue
.
var currentDate = new Date();
weekdayValue = currentDate.getDay();
Write to the Document #
Use the Document.write() method to write a string of text to the document with paragraph tags containing the weekday value..
document.write(
'<p>'
+ 'Have a ' + weekday[weekdayValue] + '!' +
'</p>'
);
Noscript fallback #
Lastly, you'll want to include a <noscript>
tag in case the user has JavaScript turned off in their browser.
<noscript>
<p>
Have a great day!
</p>
</noscript>
Full script #
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "spectacular Sunday";
weekday[1] = "marvelous Monday";
weekday[2] = "terrific Tuesday";
weekday[3] = "wonderful Wednesday";
weekday[4] = "totally cool Thursday";
weekday[5] = "fantastic Friday";
weekday[6] = "sweet Saturday";
var currentDate = new Date();
weekdayValue = currentDate.getDay();
document.write(
'<p>'
+ 'Have a ' + weekday[weekdayValue] + '!' +
'</p>'
);
</script>
<noscript>
<p>
Have a great day!
</p>
</noscript>