日付のある週番号カウンタ

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週間を追加または減算することができます。コードと

問題：

• 週間を追加またはsubstracting後 - >現在の日付に数週間をリセットするために現在 - ボタンを押すと、追加またはsubstractingが起動しません現在の週からですが、現在のボタンを押す前です。

• 回の - ボタンのカップルを追加しsubstractを押すと押した後、週番号は即座に（同じことが1ではなく、3で上がって、逆に代わり1の、3でダウン年間の変化は、時々週は週連続にジャンプするたびに）

• 2.

任意のアイデアは、コードでこれらの問題を解決する方法は？

何か助けていただければ幸いです。

Answer 1

問題は、Date#set****関数が引数を変更することです。これは実際には起こらないようにしたい時にもcurrに影響します。

これを解決するには、関数startOfWeekとendOfWeekが引数を変更せず、新しいDateインスタンスを返すようにします。そして、コードの重複を避け、できるだけそれらの関数を呼び出すことに固執します。 currを修正する必要がある場所はほんのわずかであり、それは（私はそれをweekResetに改名しました）とweekPlusの機能（そしてweekMinですが、次の点を参照してください）にあります。

weekPlusと同じロジックを持つので、私はweekMinを削除します。パラメータをweekPlusに設定することで、相違を解決できます。

Date.prototype.getWeekNumberを何度も再定義しないでください。これを1回だけ実行してください。

最後に、コードの重複を避けるために、レンダリングロジックを日付計算から分割します。出力を生成するための別のdisplay関数を作成します。現在のブラウザでは、idの要素のグローバル変数が作成されるため、document.getElementByIdは必要ありません。これは、idの要素の変数と一致しないように、関数weekの名前を変更した理由もあります。ここで

が改訂コードです：

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>