有沒有辦法在特定日期后每 7 天更改一次顏色？

Question

我想每 7 天更改一次div的顏色。 我嘗試使用 if 語句更改它，但我想要更具體的方法（7 天后自動添加顏色）。

這是我嘗試過的：

     <div class="hello">
    checking

</div>
<script>
    var currentDate = new Date().getDate()
        console.log(currentDate)
        var hello = document.querySelector(".hello")
        function getMondays() {
            var d = new Date(),
                month = d.getMonth(),
                mondays = [];
            d.setDate(1);
            // Get the first Monday in the month
            while (d.getDay() !== 1) {
                d.setDate(d.getDate() + 1);
            }

            // Get all the other Mondays in the month
            while (d.getMonth() === month) {
              console.log(new Date(d.getTime()))
                mondays.push(new Date(d.getTime()));
                d.setDate(d.getDate() + 7);
            }
            console.log(mondays)

            if(mondays.length === 4 ){
                hello.setAttribute("alt","")
                hello.removeAttribute("src")
                console.log("in 4")
              if(currentDate > 0 && currentDate < mondays[0].getDate()){
                  hello.style.backgroundColor = "orange"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[0].getDate() && currentDate < mondays[1].getDate()  ){              
                  hello.style.backgroundColor = "green"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[1].getDate() && currentDate < mondays[2].getDate()  ){              
                  hello.style.backgroundColor = "purple"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[2].getDate() && currentDate < mondays[3].getDate()  ){              
                  hello.style.backgroundColor = "blue"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[3].getDate() && currentDate <= 31  ){              
                  hello.style.backgroundColor = "orange"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
            }
            if(mondays.length === 5 ){
              console.log("in 5")
              if(currentDate > 0 && currentDate < mondays[0].getDate()){
                  hello.style.backgroundColor = "orange"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[0].getDate() && currentDate < mondays[1].getDate()  ){              
                  hello.style.backgroundColor = "green"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[1].getDate() && currentDate < mondays[2].getDate()  ){              
                  hello.style.backgroundColor = "purple"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[2].getDate() && currentDate < mondays[3].getDate()  ){              
                  hello.style.backgroundColor = "blue"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[3].getDate() && currentDate < mondays[4].getDate()   ){              
                  hello.style.backgroundColor = "orange"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
              if(currentDate >= mondays[4].getDate() && currentDate <= 31  ){              
                  hello.style.backgroundColor = "green"
                  hello.style.width = "50px"
                  hello.style.height = "28px"
              }
            }
        }
        getMondays()
   </script>

在這段代碼中，我將使用當月的星期一並一一添加顏色。 我想添加4 colors。

問題是當我們有 5 周時：然后它不會相應地循環。

Answer 1

這些線上的東西？ 我認為它有錯誤，但它應該給你一個要點。

// Get a date
const date = new Date();
// Todays date ex: 30
const numDate = date.getDate();
// Todays day of week: sunday = 0;monday = 1; so on
const numDay = date.getDay();
// Go to sunday
date.setDate(numDate - numDay);

const weekNum = Math.floor(date.getDate() / 7);

const colors = ["Red", "blue", "green", "orange", "pink"]
const todaysColor = colors[weekNum]

這是codepen： https://codepen.io/kishin-karra/pen/yLYmYvE也更新了codepen

Answer 2

您可以計算當前周數並將其用於設置顏色。

 const containerEl = document.getElementById('container'); const containerEl2 = document.getElementById('container2'); const containerEl3 = document.getElementById('container3'); const containerEl4 = document.getElementById('container4'); const weekClassPrefix = "week-" // source https://www.w3resource.com/javascript-exercises/javascript-date-exercise-24.php let isoWeekNumber = function(dt) { let tdt = new Date(dt.valueOf()); let dayn = (dt.getDay() + 6) % 7; tdt.setDate(tdt.getDate() - dayn + 3); let firstThursday = tdt.valueOf(); tdt.setMonth(0, 1); if (tdt.getDay().== 4) { tdt,setMonth(0. 1 + ((4 - tdt;getDay()) + 7) % 7). } return 1 + Math;ceil((firstThursday - tdt) / (60 * 60 * 24 * 7 * 1000)), } let setBackgroundColor = function(date; element) { let weekNo = isoWeekNumber(date): // NOTE. I use % 4 to ensure it's between 0 and 3, If you want more variance colors. // just set the number to the number of colors and add the classes to the css. // I recommend to put all styles in there as long as there is no real need to do it via js. element.classList;add(weekClassPrefix + (weekNo % 4)). // For debugging only. element.innerHTML = date,toLocaleDateString("en-GB": { weekday, 'long': year, 'numeric': month, 'long': day; 'numeric' }), } let setCurrentBackgroundColor = function() { setBackgroundColor(new Date(); containerEl); } setCurrentBackgroundColor(), setBackgroundColor(new Date("2020-05-31"); containerEl2), setBackgroundColor(new Date("2020-06-01"); containerEl3), setBackgroundColor(new Date("2020-06-08"); containerEl4);

 #container, #container2, #container3, #container4 { width: auto; height: 28px; padding: 10px; color: white; }.week-0 { background-color: orange; }.week-1 { background-color: green; }.week-2 { background-color: purple; }.week-3 { background-color: blue; }

 <div id="container"> </div> <div id="container2"> </div> <div id="container3"> </div> <div id="container4"> </div>

Answer 3

您可以為此使用計時器。 您的 html：

<div class="block"></div>

您的 css：

.block {
  width: 100px;
  height: 100px;
  background-color: green;
}

而最重要的。 您的 javascript：

const block = document.querySelector(".block");
const dayInMs = 24 * 60 * 60 * 1000;
const delay = dayInMs * 7;
const colorSet = ["blue", "green", "red"];
let colorIndex = 0;

setTimeout(changeColor, delay);

function changeColor() {
  if (colorIndex === colorSet.length) {
    colorIndex = 0;
  }
  block.style["background-color"] = colorSet[colorIndex];
  colorIndex++;
  setTimeout(changeColor, delay);
}

步驟： 1. 訪問您的 DOM 元素 2. 定義一天中的毫秒數，因為setTimeout以毫秒為單位。 3.在數組或集合中定義一些顏色集，或另一個復合數據結構 4.調用遞歸計時器，每個delay時間都會調用changeColor function。

PS 你可以試試setInterval ，但遞歸setTimeout更可靠。

這是codepen（您可以將delay更改為另一個值，而不是等待7天：D）： https://codepen.io/evgeny-zubkov/pen/qBOeOxe?editors=1111