文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >每当单击next时，当前周+1

问每当单击next时，当前周+1
EN

Stack Overflow用户
提问于 2020-01-02 08:25:54
回答 1查看 177关注 0票数 0

每当我单击"next“箭头时，我就会尝试将我的代码带到下一周。

在目前，只有1次，当点击这样就会持续到第二周。

​

代码语言：javascript
复制
//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)
})
代码语言：javascript
复制
<!-- 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>

​

不知道我怎么能让它在整个一年中循环，并给我下一个星期的数字。谢谢

javascript
EN

回答 1

Stack Overflow用户

发布于 2020-01-02 08:42:55

而不是

代码语言：javascript
复制
myDate = new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate()+1);

下周就这么做

代码语言：javascript
复制
myDate = new Date(myDate.getFullYear(),myDate.getMonth()-1,myDate.getDate()+7);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59560301

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档