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

【问题标题】：Changing div style for every day of the week script更改每周脚本的每一天的 div 样式
【发布时间】：2015-08-27 20:22:13
【问题描述】：

这是我的项目：http://jsfiddle.net/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>

我想要的是在星期一，星期一框的颜色从 background-color: #49CEFF; 变为 background-color: #242424;，星期四的盒子颜色相同，其他日子以此类推。

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

【问题讨论】：

    标签： javascript css time


    【解决方案1】：

    一种方法是：

    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，用于实验/开发。

    参考资料：

    【讨论】：

    • 我喜欢通过 JavaScript 设置类然后在 CSS 中通过该类应用样式的想法。 +1
    【解决方案2】：

    您可以通过添加一些 JavaScript 和一个 CSS 类来做到这一点。

    更新JSFiddle

    新的 CSS 类

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

    JavaScript - 找出星期几，然后找到所有 &lt;p&gt; 的 innerText 等于星期几，并添加新的 css 类。

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

    【讨论】：

      【解决方案3】：

      您必须检查当前日期，然后每隔一分钟左右检查今天是哪一天，或者可能每隔 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);
};

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

      当日期发生变化时，日期对象会自动获取它，因为我们每秒都会创建一个新的日期对象，所以您将获得准确的时间。

      这在您刷新页面时也有效，因为该功能将每秒运行一次，因此刷新完全没有问题。

      【讨论】：

        【解决方案4】：

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

        getDay()

        【讨论】：

          猜你喜欢
          • 2019-11-03
          • 1970-01-01
          • 1970-01-01
          • 2014-08-06
          • 2012-03-31
          • 2015-03-08
          • 1970-01-01
          • 1970-01-01
          • 2011-05-30
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode