onclick() 的重复函数

Question

我有一个名为 week() 的函数，它为我提供了当前一周中的第一天 (startDate) 和最后一天 (endDate) 以及周数。我还有另外两个函数，分别称为 weekPlus() 和 weekMinus()，其中包含将变量 startDate / endDate 加减 7 和周数加减 1 的变量。

<script>
    // First and last day of the current week
    var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
    function week() {
        var 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 weekPlus() {

        // 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 + 7));
        var endDate = new Date(curr.setDate(last + 7));

        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() {

        // 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 - 7));
        var endDate = new Date(curr.setDate(last - 7));

        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，而不仅仅是一次？

代码问题：

• 当月份更改时添加或减去，月份名称不会更改但保持不变，例如：Sun Oct 29 2017 19:20:14 - Wed Oct 04 2017 19:20:14

• 在相加或相减时，周数有时会跳跃 2、5 或更多。

Answer 1

问题是您每次调用函数时都在定义cur。如果你在外面定义它，你可以继续在相同的开始日期上添加天数：

// First and last day of the current week
var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
    function weekPlus()
    {
    
        // 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 + 7));
        var endDate = new Date(curr.setDate(last + 7));
    
        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());
    }

<div id="start">start</div>
<div id="end">end</div>
<div id="week">week</div>
<button onclick="weekPlus()">add</button>

---

您在使用 curr 变量时遇到了一些问题，因为您在使用它时正在对其进行修改。把它作为参考，然后你就没有问题了：

    // First and last day of the current week
    var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
    curr.setHours(0,0,0,0);
    function week() {

        // 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());
    }

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

Answer 2

您可以将 curr 变量移到函数之外，并且每次运行函数时 - 更新该变量的值：

// First and last day of the current week
var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);

function weekPlus() {

  // 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 + 7));
  var endDate = new Date(curr.setDate(last + 7));

  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 " + new Date().getWeekNumber());
  
  curr = startDate;
}

<div id="start"></div>
<div id="end"></div>
<div id="week"></div>
<input type="button" value="Plus" id="plus" onclick="weekPlus()"/>