周数计数器与日期

时间:2017-08-26 18:21:56

标签: javascript jquery function date time

我目前正在尝试制作一个日期/星期计数器,您可以在一周的第一天和最后一天增加或减少周数。这是我迄今为止所得到的,感谢 @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>
&#13;
&#13;
&#13;

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

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

代码问题:

  • 在添加或减去周数后 - >按当前按钮将周数重置为当前日期,添加或减少不会从当前周开始,而是从按下当前按钮之前开始。

  • 添加按钮几次,然后按 substract ,周数立即减少3,而不是1.(同样的事情)反转,上升3,而不是1)

  • 每当年份发生变化时,有时一周会直接跳到第2周。

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

感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

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

通过确保函数startOfWeekendOfWeek不修改其参数,但返回新的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();
}