javascript - 单击后退箭头和日期返回；单击向前箭头和日期向前移动

Question

我想单击我的箭头和日期以相应地向后或向前移动。

不确定我应该编写什么代码才能实现这一点。

请看下面:

var myDate = new Date(),
    year = myDate.getFullYear(),
    month = myDate.getMonth(),
    day = myDate.getDay(),
    date = myDate.getDate()
    
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var days = ["Sunday", "Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
var dates = ["0","1st", "2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th", "14th", "15th", "16th", "17th", "18th", "19th",
    "20th", "21st", "22th", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"]
    
    
var dayElement = document.createElement('div')
dayElement.innerHTML = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] +  " "  + year
document.getElementById("month-today").appendChild(dayElement)

<div class ="full-date">
<i class='fas fa-angle-left'></i>
<div id="month-today"></div>
<div id="day-today"></div>
<div id="date-today"></div>
<i class='fas fa-angle-right'></i>
</div>

提前致谢

Answer 1

添加事件监听器以捕获键盘事件并在处理程序中根据键的键码显示重置日期

如果您不确定，请引用代码希望这会有所帮助:)

var myDate = new Date(),
    year = myDate.getFullYear(),
    month = myDate.getMonth(),
    day = myDate.getDay(),
    date = myDate.getDate()
    
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var days = ["Sunday", "Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
var dates = ["0","1st", "2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th", "14th", "15th", "16th", "17th", "18th", "19th",
    "20th", "21st", "22th", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"]
    
    
var dayElement = document.createElement('div')
dayElement.innerHTML = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] +  " "  + year
document.getElementById("month-today").appendChild(dayElement)
dayElement.id="myDate";
function moveDate(event){
	if(event.keyCode === 37 || event.keyCode ===  39 || event.keyCode === 40 ||event.keyCode === 38)
	{
		if(event.keyCode === 37 || event.keyCode === 40)
			myDate = new Date( myDate - (24*60*60*1000) ) //Go to previous day
		else if(event.keyCode ===  39 || event.keyCode === 38)
			myDate =new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate()+1); //Goto  next day
      
    year = myDate.getFullYear(),
    month = myDate.getMonth(),
    day = myDate.getDay(),
    date = myDate.getDate()
	
		dateval = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] +  " "  + year
		document.getElementById("myDate").innerHTML = (dateval)
	}
}

document.addEventListener("keydown", moveDate);

<div class ="full-date">
<i class='fas fa-angle-left'></i>
<div id="month-today"></div>
<div id="day-today"></div>
<div id="date-today"></div>
<i class='fas fa-angle-right'></i>
</div>