Question

到目前为止，我已经显示了本周的第一天和最后一天。我想这样做，以便当用户点击按钮时，显示下周的第一个和最后一个日期。我尝试过递增，但正如您在下面的代码中看到的那样，它似乎不起作用。正在增加正确的方法来实现这一壮举，如果是，我应该如何调整我的代码以使其有效？

//DISPLAY CURRENT DATE
var d = new Date();
var m1 = d.getUTCMonth() + 1;
var first = d.getDate() - d.getDay();
var last = first + 6; 

var year = d.getUTCFullYear();	
	    
document.getElementById("currMonth1").innerHTML = m1;
document.getElementById("currDay1").innerHTML = first;
document.getElementById("currMonth2").innerHTML = m1;
document.getElementById("currDay2").innerHTML = last;

document.getElementById("currYear").innerHTML = year;

//WEEK AFTER
function nextWeek() {
var d = new Date();

var first = d.getDate() - d.getDay();
var last = first + 6; 

var newFirst = ++x;
var newLast = ++x;
var x = 7;

document.getElementById("currDay1").innerHTML = newFirst;
document.getElementById("currDay2").innerHTML = newLast;
}

.number{
	display: inline-block;
}

h2 {
	display: block;
}

<input type="button" onclick="nextWeek()" class="arrow" value="&rarr;"><br>

<h1 class="number" id="currMonth1"></h1>
			<h1 class="number">/</h1>
			<h1 class="number" id="currDay1">
</h1>
<h1 class="number">&rarr;</h1>
			<h1 class="number" id="currMonth2">
</h1>
			<h1 class="number">/</h1>
			<h1 class="number" id="currDay2">
<br>
			<h2 id="currYear"></h2>

编辑：我设法找到解决方案。我没有使用++ x，而是使用[insert variable] + = x和[insert variable here] - = x。感谢所有回复者的反馈：）

Answer 1

x在nextWeek函数中未定义，在x函数

之外定义nextWeek

var x = 7;
//WEEK AFTER
function nextWeek() {

var d = new Date();

var first = d.getDate() - d.getDay();
var last = first + 6; 


var newFirst = ++x;
var newLast = ++x;

document.getElementById("currDay1").innerHTML = newFirst;
document.getElementById("currDay2").innerHTML = newLast;
}

这里是demo https://jsbin.com/cobelol/edit?html,js,output

Answer 2

我认为有一点订购问题。您应该重新排序代码行

var newFirst = ++x;
var newLast = ++x;
var x = 7;

订单应该是。

var d = new Date();
var first = d.getDate() - d.getDay();
var last = first + 6; 
var x = 7;
var newFirst = first+x;
var newLast = last+x;

document.getElementById("currDay1").innerHTML = newFirst;
document.getElementById("currDay2").innerHTML = newLast;

Answer 3

对代码进行了少量更改，因此当nextWeek函数运行时，月份不会保持不变。

//DISPLAY CURRENT DATE
var d = new Date();
var m1 = d.getUTCMonth() + 1;
var first = d.getDate() - d.getDay();
var last = first + 6;

var year = d.getUTCFullYear();

document.getElementById("currMonth1").innerHTML = m1;
document.getElementById("currDay1").innerHTML = first;
document.getElementById("currMonth2").innerHTML = m1;
document.getElementById("currDay2").innerHTML = last;

document.getElementById("currYear").innerHTML = year;

//WEEK AFTER
function nextWeek() {
  var date = new Date();
  var numberOfDaysToAdd = 7;
  
  // set date for next week first day and month
  date.setDate(date.getDate() + numberOfDaysToAdd);
  var nextWeekFirstDay = date.getDate();
  var nextWeekFirstDayMonth = date.getUTCMonth() + 1;
  
  // set date for next week last day and month
  date.setDate(date.getDate() + 6);
  var nextWeekLastDay = date.getDate();
  var nextWeekLastDayMonth = date.getUTCMonth() + 1;

  document.getElementById("currDay1").innerHTML = nextWeekFirstDay;
  document.getElementById("currMonth1").innerHTML = nextWeekFirstDayMonth;
  
  document.getElementById("currDay2").innerHTML = nextWeekLastDay;
  document.getElementById("currMonth2").innerHTML = nextWeekLastDayMonth;
}

.number {
  display: inline-block;
}

h2 {
  display: block;
}

<input type="button" onclick="nextWeek()" class="arrow" value="&rarr;"><br>

<h1 class="number" id="currMonth1"></h1>
<h1 class="number">/</h1>
<h1 class="number" id="currDay1">
</h1>
<h1 class="number">&rarr;</h1>
<h1 class="number" id="currMonth2">
</h1>
<h1 class="number">/</h1>
<h1 class="number" id="currDay2">
<br>
			<h2 id="currYear"></h2>

如何增加一个也是日期onclick的变量？

3 个答案: