Question

我想设计一个每周日历，当我点击按钮时，它会改为下周。我从网站上复制了代码，但我不知道它的含义。

作为一项改进，我想在下一周点击按钮时显示。我不知道该怎么做，请求你的帮助。

＆＃13;

let d = new Date();
let t = d.getDay();
        
let weekday = document.querySelectorAll(".weekday");
for (let i = 0, j = 1; i < weekday.length; i++) {
    let x = t-i;
    if (t > i) {
        weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()-x}/${d.getFullYear()}`;
    } else if (t < i) {
        weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
        j++
    } else if (t === i) {
        weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
        weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
    }
}

function nextWeek() {
    //TODO
}

＆＃13;

<div id="wrapper">
    <div id="est-finish-dates">
        <table>
            <tr>
                <th>Sunday<br/>(<span class="weekday"></span>)</th>
                <th>Monday<br/>(<span class="weekday"></span>)</th>
                <th>Tuesday<br/>(<span class="weekday"></span>)</th>
                <th>Wednesday<br/>(<span class="weekday"></span>)</th>
                <th>Thursday<br/>(<span class="weekday"></span>)</th>
                <th>Friday<br/>(<span class="weekday"></span>)</th>
                <th>Saturday<br/>(<span class="weekday"></span>)</th>
            </tr>
        </table>
    </div>
</div>
            
<button onclick="nextWeek()">next week</button>

＆＃13;

Answer 1

您需要使用Incrementing a date in JavaScript

中描述的方法之一增加d的值

您需要实现在按钮中引用的nextWeek（）方法。这样的事情应该这样做：

window.nextWeek = function(){
    // Replace this with whatever method you are using to increment the date.
    let d = new Date();

    // your existing code
    let t = d.getDay();

    let weekday = document.querySelectorAll(".weekday");
    for (let i = 0, j = 1; i < weekday.length; i++) {
        let x = t-i;
        if (t > i) {
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()-x}/${d.getFullYear()}`;
        } else if (t < i) {
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
            j++
        } else if (t === i) {
            weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
        }
    }
};

// Still need to run it the first time since it is in a function now.
nextWeek();

Answer 2

试试这个：）

<!DOCTYPE html>
<html>
   <head>
   <body>
      <div id="wrapper">
         <div id="est-finish-dates">
            <table>
               <tr>
                  <th>Sunday<br/>(<span class="weekday"></span>)</th>
                  <th>Monday<br/>(<span class="weekday"></span>)</th>
                  <th>Tuesday<br/>(<span class="weekday"></span>)</th>
                  <th>Wednesday<br/>(<span class="weekday"></span>)</th>
                  <th>Thursday<br/>(<span class="weekday"></span>)</th>
                  <th>Friday<br/>(<span class="weekday"></span>)</th>
                  <th>Saturday<br/>(<span class="weekday"></span>)</th>
               </tr>
            </table>
         </div>
      </div>
      <button onclick="nextWeek()">next week</button>
      <script>
         function renderCalender(d){
          let t = d.getDay();
             let weekday = document.querySelectorAll(".weekday");
             for (let i = 0, j = 1; i < weekday.length; i++) {
                 let x = t-i;
                 if (t > i) {
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()-x}/${d.getFullYear()}`;
                 } else if (t < i) {
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
                     j++
                 } else if (t === i) {
                     weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
                 }
             }
             }



             function changeForm (form) {
                 let otherForms = document.querySelectorAll(".inquiry-selection-active");
                 for (let i = 0; i < otherForms.length; i++) {
                     otherForms[i].className = "inquiry-selection";
                 }

                 let commissionForm = document.getElementById(`${form.value}`);
                 commissionForm.className = 'inquiry-selection-active';
             }

             function nextWeek(){
             var currentDate = new Date()
             currentDate.setTime(currentDate.getTime()+7*24*60*60*1000); //append date with 7 days and pass to render function
             renderCalender(currentDate);
             }
             renderCalender(new Date());

      </script>
   </body>
</html>

单击按钮时更改日历中的星期

2 个答案: