包含日期的周数计数器

Question

我正在设法制作一个日期/周计数器，您可以在这里增加或减少本周的第一天和最后一天的日期。这是我走到这一步，感谢@ishegg

<script> 
 
    
 
    var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7); 
 
    curr.setHours(0,0,0,0); 
 

 
    function week() { 
 
     curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7); 
 

 
     // First day of the week 
 
     var first = curr.getDate() - curr.getDay(); 
 

 
     // Last day of the week 
 
     var last = first + 6; 
 

 
     var startDate = new Date(curr.setDate(first)); 
 
     var endDate = new Date(curr.setDate(last)); 
 

 
     document.getElementById("start").innerHTML = startDate; 
 
     document.getElementById("end").innerHTML = endDate; 
 

 
     // Week number 
 
     Date.prototype.getWeekNumber = function() { 
 
      var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())); 
 
      var dayNum = d.getUTCDay() || 7; 
 
      d.setUTCDate(d.getUTCDate() + 4 - dayNum); 
 
      var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); 
 
      return Math.ceil((((d - yearStart)/86400000) + 1)/7); 
 
     }; 
 
     document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber()); 
 
    } 
 

 
    function startOfWeek(date) { 
 
     date.setDate(date.getDate() - date.getDay()); 
 
     return date; 
 
    } 
 

 
    function endOfWeek(date) { 
 
     date = startOfWeek(date); 
 
     date.setDate(date.getDate() + 6); 
 
     return date; 
 
    } 
 

 
    function weekPlus() { 
 
    
 
     var startDate = new Date(startOfWeek(curr)); 
 
     startDate.setDate(startDate.getDate() + 7); 
 
     var endDate = endOfWeek(curr); 
 
     endDate.setDate(endDate.getDate() + 7); 
 
     curr = startDate; 
 

 
     document.getElementById("start").innerHTML = startDate; 
 
     document.getElementById("end").innerHTML = endDate; 
 

 
     // Week number 
 
     Date.prototype.getWeekNumber = function() { 
 
      var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())); 
 
      var dayNum = d.getUTCDay() || 7; 
 
      d.setUTCDate(d.getUTCDate() + 4 - dayNum); 
 
      var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); 
 
      return Math.ceil((((d - yearStart)/86400000) + 1)/7 + 1); 
 
     }; 
 
     document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber()); 
 
    } 
 

 
    function weekMinus() { 
 

 
     var startDate = new Date(startOfWeek(curr)); 
 
     startDate.setDate(startDate.getDate() - 7); 
 
     var endDate = endOfWeek(curr); 
 
     endDate.setDate(endDate.getDate() - 7); 
 
     curr = startDate; 
 

 
     document.getElementById("start").innerHTML = startDate; 
 
     document.getElementById("end").innerHTML = endDate; 
 

 
     // Week number 
 
     Date.prototype.getWeekNumber = function() { 
 
      var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())); 
 
      var dayNum = d.getUTCDay() || 7; 
 
      d.setUTCDate(d.getUTCDate() + 4 - dayNum); 
 
      var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); 
 
      return Math.ceil((((d - yearStart)/86400000) + 1)/7 - 1); 
 
     }; 
 
     document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber()); 
 
    }  
 
</script> 
 

 

 
<div id="start">start</div> 
 
<div id="end">end</div> 
 
<div id="week">week</div> 
 
<button onclick="week()">current</button> 
 
<button onclick="weekPlus()">add</button> 
 
<button onclick="weekMinus()">substract</button>

按当前 - 按钮，你会得到的最后和第一天打完包括周数在内。

每次按下按钮，您都可以添加或减少1周。

问题的代码：

• 添加或从其减去周后 - >按当前 -button到周重置为当前日期，添加或从其减去不启动从当前一周开始，但从之前按下当前按钮。

• 按下后添加 -button几次，然后按。减去，星期数瞬间下降了3，而不是1（同样的事情逆转，以3往上走，而不是1 ）

• 每当一年的变化，有时一周跳直奔周2

任何想法是如何解决这些问题的代码？

任何帮助表示赞赏。

Answer 1

问题是Date#set****函数会改变参数。这也会影响curr有时你并不真的希望发生这种情况。

解决这个问题的方法是确保函数startOfWeek和endOfWeek不修改它们的参数，但返回新的Date实例。然后坚持尽可能地调用这些函数，避免代码重复。只有几个地方curr应该被修改，并且在week（我将其重命名为weekReset）和weekPlus函数（和weekMin，但请参阅下一点）。

我会删除weekMin，因为它具有与weekPlus相同的逻辑。您可以通过提供weekPlus参数来解决差异。

不要重新定义Date.prototype.getWeekNumber一遍又一遍：只要做一次。

最后，从日期计算中分离渲染逻辑，再次避免代码重复。我将创建一个单独的display函数来生成输出。请注意，由于当前浏览器为具有id的元素创建全局变量，因此不需要document.getElementById。这也是我重命名week函数的原因，因此它不会与具有该id的元素的变量重合。

下面是修改后的代码：

Date.prototype.getWeekNumber = function() { 
 
    var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())); 
 
    var dayNum = d.getUTCDay() || 7; 
 
    d.setUTCDate(d.getUTCDate() + 4 - dayNum); 
 
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); 
 
    return Math.ceil((((d - yearStart)/86400000) + 1)/7); 
 
}; 
 

 
var curr; 
 
weekReset(); 
 

 
function display() { 
 
    start.textContent = curr; 
 
    end.textContent = endOfWeek(curr); 
 
    week.textContent = ("Week " + curr.getWeekNumber()); 
 
} 
 

 
function weekReset() { 
 
    curr = startOfWeek(new Date()); 
 
    display(); 
 
} 
 

 
function startOfWeek(date) { 
 
    var start = new Date(date); 
 
    start.setHours(0,0,0,0); 
 
    start.setDate(start.getDate() - start.getDay()); 
 
    return start; 
 
} 
 

 
function endOfWeek(date) { 
 
    date = startOfWeek(date); 
 
    date.setDate(date.getDate() + 6); 
 
    return date; 
 
} 
 

 
function weekPlus(weeks) { 
 
    curr.setDate(curr.getDate() + 7 * weeks); 
 
    display(); 
 
}

<div id="start">start</div> 
 
<div id="end">end</div> 
 
<div id="week">week</div> 
 
<button onclick="weekReset()">current</button> 
 
<button onclick="weekPlus(1)">add</button> 
 
<button onclick="weekPlus(-1)">substract</button>