javascript - Changing div style for every day of the week script

This is my project: /

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

This is my project: http://jsfiddle/yL0o1cy0/

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

What I want is that on Monday, the Monday box changes color from background-color: #49CEFF; to background-color: #242424;, and the same on Thursday for the Thursday box and so on for the other days.

I know how to change change something every 24h(for example), but I really don't know what to do in this situation.

Share Improve this question edited Jun 11, 2015 at 23:10 David Thomas 254k53 gold badges382 silver badges419 bronze badges asked Jun 11, 2015 at 22:42 Ubya 1661 gold badge1 silver badge8 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

One approach is:

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>

External JS Fiddle demo, for experimentation/development.

Similarly, rather than explicitly setting a backgroundColor with the JavaScript, you could instead add a today class-name to the wrapper element:

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>

External JS Fiddle demo, for experimentation/development.

References:

Array.prototype.forEach().
Array.prototype.slice().
Date().
Date.prototype.getDay().
document.querySelectorAll().
Element.classList.
Function.prototype.call().
HTMLElement.style.
Node.textContent.
String.prototype.trim().

You can do this by adding in some JavaScript and one CSS class.

Updated JSFiddle

The new CSS class

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

JavaScript - Figure out the current day of the week and then find all <p> with innerText equal to today's day of the week and add the new css class.

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";
     }
}

You'll have to check the current day and just check every minute or so what day it is, or maybe every 10 seconds or just every second (fiddle here), one op per second is quite easy and it's not like calling the new Date() will kill your performance either.

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*/
}

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/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 oute to match 1 through 7 where 7 is sunday)
        //https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay
        setCurrentDay(weekHeadings, now.getDay() - 1);

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

I've put ments and references to the corresponding lines in the fiddle too and added a timer so that you could check when it updates.

When the day changes the date object picks up on it automagically and since we're creating a new date object every second you'll get an accurate time.

This also works when you refresh the page because the function will run every second so refreshing is no problem at all.

You would have to use Javascript to determine the day of the week and then set the background color.

getDay()

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744179772a4561927.html

javascript - Changing div style for every day of the week script - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Changing div style for every day of the week script - Stack Overflow

4 Answers 4

相关推荐