为一周中的每一天更改div样式脚本

时间：2015-06-11 22:42:25

标签： javascript css time

这是我的项目：http://jsfiddle.net/yL0o1cy0/

＆＃13;
＆＃13; 
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
＆＃13; 
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>
    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thusday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>
    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thusday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我想要的是，在星期一，星期一框将颜色从background-color: #49CEFF;更改为background-color: #242424;，星期四的框会改为星期四框，依此类推其他日期。

我知道如何每24小时更改一次更改（例如），但我真的不知道在这种情况下该怎么做。

4 个答案:

答案 0 :(得分：5)

一种方法是：

function colorToday(color) {

    // get all the <p> elements contained within <div> elements
    // with the class-name of 'dayname', using
    // document.querySelectorAll(); converting the NodeList
    // into an Array, using Functionn.prototype.call() to use
    // Array.prototype.slice():
    var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),

        // JavaScript's days of the week start with Sunday (0), here
        // we create an Array of the days of the week:
        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

        // getting the current day of the week (this returns a number
        // from 0 (Sunday) to 6 (Saturday):
        day = new Date().getDay();

    // iterating over the array we created earlier,
    // using Array.prototype.forEach():
    dayContainers.forEach(function (d) {
    // 'd' is the current array-element, here it's a DOM node
    // the <p> elements found above.

        // if the current <p> has text-content equal to
        // the day of the week found from the array:
        if (d.textContent.trim() === days[day]) {

            // we set the background-color of the <p> element's
            // parent to the colour supplied by the user:
            d.parentNode.style.backgroundColor = color;
        }
    });
}

// calling the function, setting the color:
colorToday('#242424');


function colorToday(color) {
  var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    day = new Date().getDay();

  dayContainers.forEach(function(d, i) {
    if (d.textContent.trim() === days[day]) {
      d.parentNode.style.backgroundColor = color;
    }
  });
}

colorToday('#242424');
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
</div>

外部JS Fiddle demo，用于实验/开发。

同样，您可以改为在包装元素中添加today类名，而不是使用JavaScript显式设置backgroundColor：

function colorToday(color) {
    var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        day = new Date().getDay();

    dayContainers.forEach(function (d, i) {
        if (d.textContent.trim() === days[day]) {

            // adding the 'today' class-name to the parent
            // of the <p> whose text-content is equal to
            // the current day:
            d.parentNode.classList.add('today');
        }
    });
}

colorToday();


function colorToday(color) {
  var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    day = new Date().getDay();

  dayContainers.forEach(function(d, i) {
    if (d.textContent.trim() === days[day]) {
      d.parentNode.classList.add('today');
    }
  });
}

colorToday();
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
.today {
  background-color: #242424;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
</div>

外部JS Fiddle demo，用于实验/开发。

参考文献：

答案 1 :(得分：2)

您可以通过添加一些JavaScript和一个CSS类来完成此操作。

更新了JSFiddle

新的CSS类 

.today {
    background-color:#242424 !important;
}

JavaScript - 找出一周中的当前日期，然后找到所有<p>，其中innerText等于今天的星期几，并添加新的css类。< / p> 

var d = new Date();
var weekday = new Array(7);
weekday[0]=  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[d.getDay()];

var foundItems = document.getElementsByTagName('p');

for (var i = 0; i < foundItems.length; i++) {
     if (foundItems[i].innerHTML.indexOf(n) !== -1) {
         foundItems[i].parentNode.className += " today";
     }
}

答案 2 :(得分：1)

你必须检查当天，只检查每一分钟左右，或者每隔10秒或每隔一秒（fiddle here）检查一次，每秒一次操作是非常容易的，它是不像打电话给new Date()也会扼杀你的表现。

<强> HTML 

<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
<div class="day">Sunday</div>
<div id="time"></div>

<强> CSS 

.day {
    padding: 10px 50px;
    font-size: 20px;
    background: #ccc;
    margin: 0 0 10px 0;
}

.current {
    background: #09c; /*We'll be adding this to the current day via JS*/
}

<强> JS 

window.onload = function() { //make sure DOM is loaded
    //create an array of the calendar days we'll be manipulating.
    var weekHeadings = document.getElementsByClassName('day');
    var currentTime = document.getElementById('time');
    var now = null;

    //create a function to remove and reapply a class to the current day.
    var setCurrentDay = function(elements, currentIndex) {
        //remove current class from yesterday
        //https://developer.mozilla.org/en-US/docs/Web/API/Element/className
        var current = document.getElementsByClassName('current');
        //check if current exists yet
        if (current.length > 0)
            current[0].className = 'day';
        //now set the class to today
        if (currentIndex < 0)
            elements[6].className = 'day current';
        else
            elements[currentIndex].className = 'day current';
    };

    //added a extra timer and check day every second
    var updateTime = setInterval(function() {
        var now = new Date();
        //threw in a timer too.
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        //(note sunday = 0 so we add one to the outcome to match 1 through 7 where 7 is sunday)
        //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay
        setCurrentDay(weekHeadings, now.getDay() - 1);

        currentTime.innerHTML = hours +':'+ minutes +':'+ seconds;
    }, 1000);
};

我也对小提琴中的相应行添加了注释和引用，并添加了一个计时器，以便您可以检查它何时更新。

当日期更改时，日期对象会自动选择日期对象，因为我们每秒都会创建一个新的日期对象，所以您将获得准确的时间。

这在刷新页面时也有效，因为该功能每秒都会运行，所以刷新完全没问题。

答案 3 :(得分：0)

您必须使用Javascript来确定星期几，然后设置背景颜色。

getDay()

相关问题
最新问题