使用onclick（）重复执行功能

Question

我有一个名为week()的函数，它为我提供当前第一天（startDate）和最后一天（endDate）日和周数。我还有另外两个名为weekPlus()和weekMinus()的函数，其中包含的变量可以将变量startDate / endDate加7或减去7，并将周数加1

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以我们的想法是，当您第一次点击当前按钮时，您会获得当天和最后一天的当前日期，之后您可以添加或减去日期。

有没有什么快速有效的方法可以在每次单击按钮而不是只按一次时将天数增加或减少7，将周数减少1？

代码问题：

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

• 添加或替代时，周数有时会跳过2,5或更多。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

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()"/>