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

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>

Answer 2

我想这就是您要找的

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 dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] +  " "  + year
document.getElementById("date").innerText = dateText;
  
  document.getElementById("next").addEventListener("click", next);
  document.getElementById("prev").addEventListener("click", prev);
  
function next() {
   myDate =new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate()+1);
   //myDate = new Date(myDate + 86400000);
    year = myDate.getFullYear(),
    month = myDate.getMonth(),
    day = myDate.getDay(),
    date = myDate.getDate();
    var dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] +  " "  + year
document.getElementById("date").innerHTML = dateText;
    
}

function prev() {
  myDate = new Date(myDate - 86400000);
  year = myDate.getFullYear(),
  month = myDate.getMonth(),
  day = myDate.getDay(),
  date = myDate.getDate();
  var dateText = days[day]+ "," + " "+ dates[date] + " "+ "of" + " " + months[month] +  " "  + year
  document.getElementById("date").innerHTML = dateText;
}

<div class ="full-date">
<i class='fas fa-angle-left' id="prev"> &lt;  </i>
<div id="date"></div>
<i class='fas fa-angle-right' id="next"> &gt; </i>
</div>

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

Click back arrow and date to go back ; click forward arrow and date to move forward

html

javascript

css

font-awesome