包含日期的週數計數器

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>