當前周 + 1 每當單擊下一步

Question

每當我單擊“下一個”箭頭時，我都會嘗試將我的代碼帶到下一周。

目前只在點擊時執行 1 次，所以直到第 2 周。

 //Task Manager// var idCounter = 0 var tasksManager = { array: [], add: function(task,bracketStart,bracketEnd,date){ taskObject = { title: task, idVerification: idCounter ++, startTask: bracketStart, endTask:bracketEnd, dateTask: date } tasksManager.array.push(taskObject) }, show:function(id){ var i; for (i = 0; i < tasksManager.array.length; i++) { if(id === tasksManager.array[i].idVerification){ return tasksManager.array[i] } } }, delete:function(task){ if(this.show){ tasksManager.array.splice(task) } } } // Calendar // Week Date var myDate = new Date(), year = myDate.getFullYear(), month = myDate.getMonth(), day = myDate.getDay(), date = myDate.getDate() var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] var days = ["Sunday", "Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] var dates = ["0","1st", "2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22th", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"] var dayElement = document.createElement('div') dayElement.innerHTML = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] + " " + year + " " + "-" document.getElementById("month-today").appendChild(dayElement) myDate =new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate()+7); year = myDate.getFullYear(), month = myDate.getMonth(), day = myDate.getDay(), date = myDate.getDate() var dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] + " " + year document.getElementById("month-seven").innerHTML = dateText //Week number function getWeeksInMonth(month, year){ var weeks=[], firstDate=new Date(year, month, 1), lastDate=new Date(year, month+1, 0), numDays= lastDate.getDate(); var start=1; var end=7-firstDate.getDay(); while(start<=numDays){ weeks.push({start:start,end:end}); start = end + 1; end = end + 7; if(end>numDays) end=numDays; } return weeks; } getWeeksInMonth() document.getElementById("week").innerHTML =getWeeksInMonth(1,2020) [0].start document.getElementById("year").innerHTML = year; document.getElementById("next").addEventListener("click", next); document.getElementById("prev").addEventListener("click", prev); function next() { myDate = new Date(myDate.getFullYear(),myDate.getMonth()-1,myDate.getDate()+7); year = myDate.getFullYear(), month = myDate.getMonth(), day = myDate.getDay(), date = myDate.getDate() var datePlusOne = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] + " " + year + " " + "-" document.getElementById("month-today").innerHTML = datePlusOne myDate =new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate()+7); year = myDate.getFullYear(), month = myDate.getMonth(), day = myDate.getDay(), date = myDate.getDate() var dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] + " " + year document.getElementById("month-seven").innerHTML = dateText document.getElementById("week").innerHTML =getWeeksInMonth(1,2020) [0].start + 1 } function prev() { myDate = new Date(myDate - 86400000); year = myDate.getFullYear(), month = myDate.getMonth(), day = myDate.getDay(), date = myDate.getDate(); var dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] + " " + year document.getElementById("month-seven").innerHTML = dateText; myDate = new Date(myDate - 86400000 *7); year = myDate.getFullYear(), month = myDate.getMonth(), day = myDate.getDay(), date = myDate.getDate(); var dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] + " " + year + " " + "-" document.getElementById("month-today").innerHTML = dateText; } var button = document.getElementById("save-task") var input = document.getElementById("add-new-task") var startTime = document.getElementById("time-stamp") var endTime = document.getElementById("time-stamp-finish") var eventElement = document.querySelector('.event') var arrows = document.querySelector('.fas') var timeInput = document.getElementById("add-time") var timeBar = document.querySelectorAll(".hours") eventElement.addEventListener('click', () =>{ document.getElementById('task-input').classList.toggle('new-task'); }) button.addEventListener('click', () =>{ tasksManager.add(input.value) var taskEvent = document.createElement('div') taskEvent.style.background = "#d25757" taskEvent.style.border = "1px solid black" taskEvent.style.padding = "30px" taskEvent.innerHTML = input.value eventElement.appendChild(taskEvent) }) arrows.addEventListener('click', () =>{ var goBack = new Date((new Date).valueOf() - 86350989) console.log(goBack) })

 <!-- Added during edit in an attempt to make it working --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ProdPlus 💪</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Tomorrow&display=swap" rel="stylesheet"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="stylesheet" href="css/animate.min.css"> </head> <body> <h1 class="animated lightSpeedIn">ProdPlus+ 💪</h1> <div class="dropdown-menu"> </div> <div class ="full-date"> <i class='fas fa-angle-left' id="prev"></i> <div id="month-today"></div> <div id="month-seven"></div> <div id="day-today"></div> <div id="date-today"></div> <i class='fas fa-angle-right'id="next" ></i> </div> <div class ="week"> <div class ="week-text">Week</div> <div id = "week"></div> <div class ="week-text">of</div> <div id= "year"></div> </div> <div class="new-task" id="task-input"> <div >Task: <input id="add-new-task" type="text"></div> <div id="add-time"> <label>Time</label> <select id = "time-stamp"> <option value = "00:00">00:00</option> <option value = "01:00">01:00</option> <option value = "02:00">02:00</option> <option value = "03:00">03:00</option> <option value = "04:00">04:00</option> <option value = "05:00">05:00</option> <option value = "06:00">06:00</option> <option value = "07:00">07:00</option> <option value = "08:00">08:00</option> <option value = "09:00">09:00</option> <option value = "10:00">10:00</option> <option value = "11:00">11:00</option> <option value = "12:00">12:00</option> <option value = "13:00">13:00</option> <option value = "14:00">14:00</option> <option value = "15:00">15:00</option> <option value = "16:00">16:00</option> <option value = "17:00">17:00</option> <option value = "18:00">18:00</option> <option value = "19:00">19:00</option> <option value = "20:00">20:00</option> <option value = "21:00">21:00</option> <option value = "22:00">22:00</option> <option value = "23:00">23:00</option> </select> - <select id = "time-stamp-finish"> <option value = "00:00">00:00</option> <option value = "01:00">01:00</option> <option value = "02:00">02:00</option> <option value = "03:00">03:00</option> <option value = "04:00">04:00</option> <option value = "05:00">05:00</option> <option value = "06:00">06:00</option> <option value = "07:00">07:00</option> <option value = "08:00">08:00</option> <option value = "09:00">09:00</option> <option value = "10:00">10:00</option> <option value = "11:00">11:00</option> <option value = "12:00">12:00</option> <option value = "13:00">13:00</option> <option value = "14:00">14:00</option> <option value = "15:00">15:00</option> <option value = "16:00">16:00</option> <option value = "17:00">17:00</option> <option value = "18:00">18:00</option> <option value = "19:00">19:00</option> <option value = "20:00">20:00</option> <option value = "21:00">21:00</option> <option value = "22:00">22:00</option> <option value = "23:00">23:00</option> </select> </div> <div id = "date-stamp"> Date: <input type="date" id="event-date" name="bday" max="2030-12-31"><br> </div> <button class ="save-task" id ="save-task" onclick="">Save task</button> </div> <div class ="calendar"> <div id="day-of-week"> <div class="day" id="Monday">Monday</div> <div class="day"id="Tuesday">Tuesday</div> <div class="day"id="Wednesday">Wednesday</div> <div class="day"id="Thursday">Thursday</div> <div class="day"id="Friday">Friday</div> <div class="day"id="Saturday">Saturday</div> <div class="day"id="Sunday">Sunday</div> </div> <div class="hours"> <div><option value = "04:00">04:00</option></div> <div><option value = "05:00">05:00</option></div> <div><option value = "06:00">06:00</option></div> <div><option value = "07:00">07:00</option></div> <div><option value = "08:00">08:00</option></div> <div><option value = "09:00">09:00</option></div> <div><option value = "10:00">10:00</option></div> <div><option value = "11:00">11:00</option></div> <div><option value = "12:00">12:00</option></div> <div><option value = "13:00">13:00</option></div> <div><option value = "14:00">14:00</option></div> <div><option value = "15:00">15:00</option></div> <div><option value = "16:00">16:00</option></div> <div><option value = "17:00">17:00</option></div> <div><option value = "18:00">18:00</option></div> <div><option value = "19:00">19:00</option></div> <div><option value = "20:00">20:00</option></div> <div><option value = "21:00">21:00</option></div> <div><option value = "22:00">22:00</option></div> <div><option value = "23:00">23:00</option></div> <div><option value = "00:00">00:00</option></div> <div><option value = "01:00">01:00</option></div> <div><option value = "02:00">02:00</option></div> <div><option value = "03:00">03:00</option></div> </div> <div class="grid-container-events"> <div class="event event-1"></div> <div class="event event-2 "></div> <div class="event event-3"></div> <div class="event event-4"></div> <div class="event event-5"></div> <div class="event event-6"></div> <div class="event event-7"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> <div class="grid-container-events"> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> <div class="event"></div> </div> </div> <div id="dates"> </div> <script src="script.js"></script> </body> </html>

不確定如何讓它在全年循環並給我以下周數。 謝謝

Answer 1

代替

myDate = new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate()+1);

下周做這個

myDate = new Date(myDate.getFullYear(),myDate.getMonth()-1,myDate.getDate()+7);