чувствительное ко времени переключение стилевых таблиц CSS с использованием JavaScript - PullRequest
Новая
       30

чувствительное ко времени переключение стилевых таблиц CSS с использованием JavaScript

2 голосов
/ 05 декабря 2010

Я пытаюсь переключать свои таблицы стилей CSS в зависимости от времени. Один днем ​​и один ночью. Я новичок, когда дело доходит до Java, но я много читал о JavaScript и сгенерировал некоторый код, который должен позволить этой работе. Я пробовал, конечно, это не работает.

Я попытался поместить код в заголовок, затем попытался поместить его сразу после тега. Но это тоже не сработало.

Таблица стилей css работает сама по себе, но не работает вообще при использовании в сценарии. Это заставляет меня верить, что это не тот сценарий. Может я неправильно написал?

Вот код JavaScript: 

<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>

Ответы [ 6 ]

2 голосов
/ 05 декабря 2010

Вместо того, чтобы изменять css-файлы, я предлагаю вам изменить класс элемента body с "day" на "night". Затем используйте селектор классов в файле CSS. 

css file
.day h2 {font-weight: bold;}
.night h2  {font-weight: normal;}
... etc

Обновлено: тогда используйте Javascript document.body.className='day'; изменить. Спасибо @Phrogz за JS. (См. Комментарий к этому ответу.)

1 голос
/ 05 декабря 2010

Ваш скрипт, кажется, пишет пустой экран на странице независимо от того, какое условие является истинным.

Я предлагаю добавить класс к телу в зависимости от того, какая ветвь вашего if / else достигнута. 

function setTimesStyles(){
  if( ... )
    document.body.className = 'morning';
  else
    document.body.className = 'evening';
}

Если вы поместите это в функцию, как я это сделал, вы можете вызвать ее при загрузке страницы следующим образом: 

<body onload="setTimeStyles();">

Таким образом, вы можете поместить код в раздел вашегоdocument.

Устанавливая это имя класса, вы можете написать правила CSS для утра или вечера, предварительно добавив им «.morning» или «.evening», например: 

.morning h1{ color:blue; }
.evening h1{ color:red; }
1 голос
/ 05 декабря 2010

Попробуйте сделать этот код читабельным: 

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('');
}

Эта статья должна оказать большую помощь: http://css -tricks.com / snippets / javascript / different-stylesheet-pending-the-time-of-day / .

Вот пример кода, которого должно хватить для ваших нужд: 

<script type="text/JavaScript">
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 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>

Удачи!

0 голосов
/ 05 декабря 2010

Вот хороший скрипт, который позволяет вам переключать таблицы стилей CSS во время выполнения .

0 голосов
/ 05 декабря 2010

например жерех

вы можете достичь этого с помощью кода на стороне сервера, включая таблицу стилей. 

<%if day then%>

<LINK href="day.css" rel="stylesheet" type="text/css">

<%else %>

<LINK href="night.css" rel="stylesheet" type="text/css">

<%
end if%>

с JQuery вы можете сделать, как показано ниже

заверните его в свой класс if 

("body").removeClass('bg2').addClass("bg1");

("body").removeClass('bg1').addClass("bg2");
0 голосов
/ 05 декабря 2010

Вам нужно дождаться окончания загрузки DOM, прежде чем выполнять эту манипуляцию.

Вот как это сделать с помощью 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>
...