Question

我正在使用html css和js构建自己的动态日历版本。我遇到了两个问题：

小问题：第二次点击后，更改为下个月/上个月的按钮可以正常工作。
主要问题：我不明白如何在右侧（“从头开始”）方向填充上个月的日期。

这是我的代码：

var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var monthnames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var today = new Date();
document.querySelector('#monthChoose').value = (today.getMonth()+1);
document.querySelector('#yearChoose').value = today.getFullYear();

// next and previous buttons
document.querySelector('#nextM').addEventListener('click', function() { document.querySelector('#monthChoose').value = operator++; buildCalendar()});
document.querySelector('#prevM').addEventListener('click', function() {document.querySelector('#monthChoose').value = operator--; buildCalendar()});

// fill days of the week as title
for (var i=0; i < days.length; i++) {
	document.querySelector('#weekdays').innerHTML += '<li><span>'+days[i]+'</span></li>';	
}
var operator = document.querySelector('#monthChoose').value; // this will later on the function to restrict input value

function buildCalendar() {		
	if (operator > 12) {operator = 1};
	if (operator < 1) {operator = 12};	
	
	document.querySelector('#days').innerHTML = ' '; // clear records
	
	var month = document.querySelector('#monthChoose').value;
	var year = document.querySelector('#yearChoose').value;
	document.querySelector('#monthName').textContent = monthnames[month-1];	// display month name
	function daysInMonth (month, year) { return new Date(year, month, 0).getDate(); }	// constructor to get number of days in chosen month
	var lastMonthDays = daysInMonth(month-1, year);
	var currentMonthDays = daysInMonth(month, year);
	
	var currentFirstDay = new Date(year, month-1 ,1);
	currentFirstDayNum = new Date(currentFirstDay).getDay();
	var currentLastDay = new Date(year, month ,1);
	currentLastDayNum = new Date(currentLastDay).getDay();

	// fill last month's days
	// this cause issue: i need to change the content direction so it will fill from the opposite direction
	for (var i=0; i < currentFirstDayNum; i++) { 		
		document.querySelector('#days').innerHTML += '<li style="opacity: 0.5;">'+(lastMonthDays-i)+'</li>';
	}
	// fill the current month days
	for (var i=0; i < currentMonthDays; i++) {
		document.querySelector('#days').innerHTML += '<li>'+(i+1)+'</li>';
	}
	// fill the rest of the board
	var liLength = document.querySelectorAll('#days > li').length;
	var restOfBoard=0;
	while (liLength < 42) {		
		restOfBoard+=1;
		document.querySelector('#days').innerHTML += '<li style="opacity: 0.5;">'+restOfBoard+'</li>';
		liLength++
	}	
}
buildCalendar();

ul {list-style-type: none; text-align: center; margin: 0; padding: 0;}

#month {padding: 30px 0; width: 100%; }
#month li input:first-child { display: none; } /* hide input that control months - will change with js*/
#monthName { display: block; }
#monthName { font-size: 2em; }
#month button {width: auto; padding: 0; font-size: 2em;}
#month #prevM {float: left;}
#month #nextM {float: right;}

#weekdays { padding: 10px 0; background-color: gray; }
#weekdays li {
	display: inline-block;
    color: white;
	width: calc(100% / 7);
}

#days { padding: 10px 0; }
#days li {
	display: inline-block;
	width: calc(100% / 7);
	height: calc(400px / 5);	
}

<ul id="month">
	<li><button id="prevM">&#10094;</button> </li>
	<li><button id="nextM">&#10095;</button> </li>
	<li id="monthName"></li>
	<li>
		<input type="number" id="monthChoose" onchange="buildCalendar()" /> 
		<input type="number" id="yearChoose" onchange="buildCalendar()"/>
	</li>
</ul>
<ul id="weekdays"></ul>
<ul id="days"></ul>

注意：很高兴听到我可以用这段代码做得更好的事情...

编辑：第二期的预期结果是上个月的最好日子。如果我们采用2019年10月：第一天是星期二，那么本周星期一应为30日，星期日应为29日。无法理解如何动态地按顺序排列那些日子。

Answer 1

所以我终于设法解决了第二个问题：给了lastMonthDays一个唯一的类，通过它的内容对其进行排序，附加排序元素，然后继续其余的代码。

为此，我根据自己的需要修改了this script。

谢谢大家。

Answer 2

第一个问题很容易通过更改来解决

  document.querySelector('#monthChoose').value = operator++;

到

  document.querySelector('#monthChoose').value = ++operator;

并更改

  document.querySelector('#monthChoose').value = operator--;

到

  document.querySelector('#monthChoose').value = --operator;

在++后面插入operator表示您不增加operator的值，直到将其值复制到“ monthChoose”元素为止，而事先放置它可以确保您进行更改其价值至上。当然，以后您可以使用“ monthChoose”元素的值来确定要显示的实际月份。

目前尚不清楚为什么实际上在这里实际上需要两个值-这仅仅是造成混乱的秘诀。由于operator是全局的，因此您可以一直使用它。另外，如果要减少对全局变量的使用（通常应该这样做），可以使用“ monthChoose”元素维护状态。

这是一个演示：

var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthnames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var today = new Date();
document.querySelector('#monthChoose').value = (today.getMonth() + 1);
document.querySelector('#yearChoose').value = today.getFullYear();

// next and previous buttons
document.querySelector('#nextM').addEventListener('click', function() {
  document.querySelector('#monthChoose').value = ++operator;
  buildCalendar()
});
document.querySelector('#prevM').addEventListener('click', function() {
  document.querySelector('#monthChoose').value = --operator;
  buildCalendar()
});

// fill days of the week as title
for (var i = 0; i < days.length; i++) {
  document.querySelector('#weekdays').innerHTML += '<li><span>' + days[i] + '</span></li>';
}
var operator = document.querySelector('#monthChoose').value; // this will later on the function to restrict input value

function buildCalendar() {
  if (operator > 12) {
    operator = 1
  };
  if (operator < 1) {
    operator = 12
  };

  document.querySelector('#days').innerHTML = ' '; // clear records

  var month = document.querySelector('#monthChoose').value;
  var year = document.querySelector('#yearChoose').value;
  document.querySelector('#monthName').textContent = monthnames[month - 1]; // display month name
  function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
  } // constructor to get number of days in chosen month
  var lastMonthDays = daysInMonth(month - 1, year);
  var currentMonthDays = daysInMonth(month, year);

  var currentFirstDay = new Date(year, month - 1, 1);
  currentFirstDayNum = new Date(currentFirstDay).getDay();
  var currentLastDay = new Date(year, month, 1);
  currentLastDayNum = new Date(currentLastDay).getDay();

  // fill last month's days
  // this cause issue: i need to change the content direction so it will fill from the opposite direction
  for (var i = 0; i < currentFirstDayNum; i++) {
    document.querySelector('#days').innerHTML += '<li style="opacity: 0.5;">' + (lastMonthDays - i) + '</li>';
  }
  // fill the current month days
  for (var i = 0; i < currentMonthDays; i++) {
    document.querySelector('#days').innerHTML += '<li>' + (i + 1) + '</li>';
  }
  // fill the rest of the board
  var liLength = document.querySelectorAll('#days > li').length;
  var restOfBoard = 0;
  while (liLength < 42) {
    restOfBoard += 1;
    document.querySelector('#days').innerHTML += '<li style="opacity: 0.5;">' + restOfBoard + '</li>';
    liLength++
  }
}
buildCalendar();

ul {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

#month {
  padding: 30px 0;
  width: 100%;
}

#month li input:first-child {
  display: none;
}


/* hide input that control months - will change with js*/

#monthName {
  display: block;
}

#monthName {
  font-size: 2em;
}

#month button {
  width: auto;
  padding: 0;
  font-size: 2em;
}

#month #prevM {
  float: left;
}

#month #nextM {
  float: right;
}

#weekdays {
  padding: 10px 0;
  background-color: gray;
}

#weekdays li {
  display: inline-block;
  color: white;
  width: calc(100% / 7);
}

#days {
  padding: 10px 0;
}

#days li {
  display: inline-block;
  width: calc(100% / 7);
  height: calc(400px / 5);
}

<ul id="month">
  <li><button id="prevM">&#10094;</button> </li>
  <li><button id="nextM">&#10095;</button> </li>
  <li id="monthName"></li>
  <li>
    <input type="number" id="monthChoose" onchange="buildCalendar()" />
    <input type="number" id="yearChoose" onchange="buildCalendar()" />
  </li>
</ul>
<ul id="weekdays"></ul>
<ul id="days"></ul>

恐怕我不能完全理解你第二个问题的意思。也许您可以给出更清晰的描述/图表以显示您想要发生的事情，然后我可以更新此答案？

更改日历设计内容的方向

2 个答案: