time-sensitive css stylsheet switching using javascript
I'm trying to swit开发者_运维知识库ch my css stylesheets depending on the time. One during the day, and one during the night. I'm a newbie when it comes to java, but i've been reading alot on javascript and have generated some code that should let this work. I tried it, of course, it doesn't work.
I tried placing the code in the header, then I tried placing it directly after the tag.But that didn't work either.
The the css stylesheet works by itself, but doesn't work at all when used in the script. This leads me to believe that it's the script that is not right. Maybe I wrote it wrong?
Here is the javascript code:
<script language="JavaScript">
var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');
else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start )
document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">');
else
document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');
</script>
Rather than changing css files, I suggest that you change a class on the body element from "day" to "night". Then use the class selector in the css file.
css file
.day h2 {font-weight: bold;}
.night h2 {font-weight: normal;}
... etc
Updated: Then use Javascript
document.body.className='day'; to change. Thanks to @Phrogz for the JS. (See comment to this answer.)
Try making that code readable:
var d = new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
{
document.write('');
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) {
document.write('');
} else {
document.write('');
}
This article should be of great assistance: http://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/.
Here's the example code, which should suffice for your needs:
<script type="text/JavaScript">
<!--
function getStylesheet() {
var currentTime = new Date().getHours();
if (0 <= currentTime&¤tTime < 5) {
document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
}
if (5 <= currentTime&¤tTime < 11) {
document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
}
if (11 <= currentTime&¤tTime < 16) {
document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
}
if (16 <= currentTime&¤tTime < 22) {
document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
}
if (22 <= currentTime&¤tTime <= 24) {
document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
}
}
getStylesheet();
-->
</script>
<noscript><link href="main.css" rel="stylesheet" type="text/css"></noscript>
Good luck!
Your script seems to write a blank screen to the page regardless of what condition is true.
I suggest adding a class to the body depending on which branch of your if/else is reached.
function setTimesStyles(){
if( ... )
document.body.className = 'morning';
else
document.body.className = 'evening';
}
If you put this in a function, as I have done, you can call it on page load like this:
<body onload="setTimeStyles();">
That way you can put the code in the section of your document.
By setting this class name, you can then write CSS rules for morning or evening by prefacing them with ".morning" or ".evening" like this:
.morning h1{ color:blue; }
.evening h1{ color:red; }
Here's a good script that allows you to switch CSS style sheets at runtime.
for example asp
you can achieve it through server side code while including the style sheet.
<%if day then%>
<LINK href="day.css" rel="stylesheet" type="text/css">
<%else %>
<LINK href="night.css" rel="stylesheet" type="text/css">
<%
end if%>
with jquery u can do as below
wrap it over in your if class
("body").removeClass('bg2').addClass("bg1");
("body").removeClass('bg1').addClass("bg2");
You need to wait until the DOM has finished loading before performing this manipulation.
Here's how to do this using jQuery:
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(function() {
var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end) {
$('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) {
$('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">').appendTo("head");;
} else {
$('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");;
}
});
//]]>
</script>
加载中,请稍侯......
精彩评论