带日期的周数计数器

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>

因此，在您按下 current 按钮后，您将获得一周的最后一天和第一天，包括周数。

每按一次按钮，您可以增加或减少 1 周。

代码问题：

• 在添加或减去周后 -> 按当前 - 按钮将周重置为当前日期，添加或减去不会从当前周开始，但在您按下 current 按钮之前。

• 在按几次 add - 按钮然后按 substract 后，周数立即减少 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 函数来生成输出。请注意，您不需要document.getElementById，因为当前浏览器会为具有id 的元素创建全局变量。这也是我重命名 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>