how to bold day and time with javascript
I'm trying to post hours on my website and I want the day and time to bold automatically based on javascript. Is it possible to setup some javascript so that on Monday would be bold and then on tuesday would be bold and so on?
Here is the code:
<div id="monday">M开发者_JAVA百科onday: 12:00-2:00</div>
<div id="tuesday">Tuesday: 11:00-3:00</div>
and so on for each day. When a user accesses the site on a Monday, I want the monday div to bold everything that is in there. When a user accesses the site on a tuesday, I want the entire tuesday div to bold.
Thanks
Like this:
Example: http://jsfiddle.net/c5bHx/
<!DOCTYPE html>
<html>
<head><title>title</title></head>
<body>
<!-- your content -->
<!-- place this just inside your closing </body> tag -->
<script type="text/javascript>
var days = 'sunday,monday,tuesday,wednesday,thursday,friday,saturday'.split(',');
document.getElementById( days[(new Date()).getDay()] ).className = 'bold';
</script>
</body>
</html>
css
.bold {
font-weight:bold;
}
EDIT:
Here's a breakdown of what is happening. I'm going to make it much more verbose, expanding the code into different variables so it is easier to see.
// This simply creates a string of days in the week
var days = 'sunday,monday,tuesday,wednesday,thursday,friday,saturday';
// This splits the string on the commas, turning it into an Array of weekdays
days = days.split(',');
// Create a new Date object, representing today's date and time
var date = new Date();
// Get the number of the day of the week. 0 if sunday, 1 if monday, etc...
var dayNumber = date.getDay();
// Using the "dayNumber", get the day string by its index from the "days" array
var dayString = days[ dayNumber ];
// Select the element on the page that has the ID that matches the "dayString"
var dayElement = document.getElementById( dayString );
// Set the "class" property of the "dayElement" to the "bold" class.
dayElement.className = "bold";
Note that the conversion of a String of days into an Array isn't necessary. Just a little shorter and quicker to type.
You could do:
var days = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday'];
This creates an Array, so you wouldn't need to do the .split().
If you want the day and time to be bold just squirt of the relevant or tag around the day/time (or even the entire datetime) in javascript with document.write, or manipulate javascript elements with jQuery, eg. daytime?
If you can put any tag around your time text there is no reason to have JS involved for formating - with same efford you can formating from your script like putting tags, however if can not do it only solution (with this amount of details) is scaning whole page or elected elements, look for datatime pattern, reformat it and return to page (regular expression will be helpful)
Ok we got some details....
var x = document.getElementByID('monday').innerHTML;
document.getElementByID('monday').innerHTML = '<B>' + x + '</B>';
加载中,请稍侯......
精彩评论