今天明天后天按钮HTML和JavaScript介绍

概述

在网页设计中，经常需要使用日期选择功能。其中，常见的功能就是在当前日期上统计出今天、明天、后天三个日期，并能够对其进行选择。

在本文中，将会介绍如何使用HTML和JavaScript代码实现今天、明天、后天按钮的功能，并且能够进行日期选择。

HTML代码

下面是一个实现今天、明天、后天按钮功能的HTML代码片段。其中，div中包含了三个按钮和一个日期控件：

<div>
  <button onclick="setDate(0)">今天</button>
  <button onclick="setDate(1)">明天</button>
  <button onclick="setDate(2)">后天</button>
  <input type="date" id="myDate">
</div>

JavaScript代码

下面是实现今天、明天、后天按钮功能的JavaScript代码片段。其中，setDate函数用于计算选择日期的值，并将其赋值给日期控件。

function setDate(dayNum) {
  var inputDate = new Date();
  var today = inputDate.getDay();
  var setDate = inputDate.setDate(inputDate.getDate() + dayNum - today);
  var xDate = new Date(setDate);
  var xMonth = xDate.getMonth() + 1;
  var xDay = xDate.getDate();

  if (xMonth < 10) {
    xMonth = "0" + xMonth;
  }

  if (xDay < 10) {
    xDay = "0" + xDay;
  }

  var xDateFormatted = xDate.getFullYear() + "-" + xMonth + "-" + xDay;
  document.getElementById("myDate").value = xDateFormatted;
}

实现效果

在浏览器中打开HTML文件后，点击“今天”按钮，日期控件的值会自动变为今天的日期；同理，点击“明天”或“后天”按钮，日期控件的值也会自动变为对应的日期。

总结

本文介绍了如何使用HTML和JavaScript代码实现今天、明天、后天按钮的功能，并能够进行日期选择。通过本文的介绍，相信程序员们已经掌握了如何实现此功能，并且可以进行进一步地自定义和扩展。