Question

我目前正在尝试制作一个日期/星期计数器，您可以在一周的第一天和最后一天增加或减少周数。这是我迄今为止所得到的，感谢 @ishegg

＆＃13;

<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>

＆＃13;

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

每按一次按钮，您可以添加或减去1周。

代码问题：

~~在添加或减去周数后 - >按当前按钮将周数重置为当前日期，添加或减少不会从当前周开始，而是从按下当前按钮之前开始。~~
按添加按钮几次，然后按 substract ，周数立即减少3，而不是1.（同样的事情）反转，上升3，而不是1）
每当年份发生变化时，有时一周会直接跳到第2周。

有任何想法如何用代码解决这些问题？

感谢任何帮助。

Answer 1

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

通过确保函数startOfWeek和endOfWeek不修改其参数，但返回新的Date实例来解决此问题。然后尽可能地调用这些函数，避免代码重复。只有少数地方应修改curr，并且week（我将其重命名为weekReset）和weekPlus函数（以及{{1}但是，请看下一点）。

我会删除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();
}

周数计数器与日期

1 个答案: