如何在JavaScript中使当月的日期，日期和日期动态化？

Question

我在日期中没有几栏，如何在javascript中根据当前日期将其动态化？答案将不胜感激！

tableview

var date = new Date();
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$('.thisMonth').text(monthNames[date.getMonth()]);
$('.toadayDate3').text(date.getDate() + 2);
$('.toadayDate4').text(date.getDate() + 3);
$('.toadayDate5').text(date.getDate() + 4);
$('.toadayDate6').text(date.getDate() + 5);
$('.toadayDate7').text(date.getDate() + 6);

.custom_date,
.custom_time {
  width: 1000px;
}

.custom_date ul {
  margin: 0px;
  padding: 0px;
}

.custom_date ul li {
  list-style: none;
  float: left;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 0px 5px;
  width: 60px;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  min-height: 55px;
}

.custom_date ul li:nth-child(1) span,
.custom_date ul li:nth-child(2) span {
  padding-top: 28%;
}

.custom_date ul li span {
  display: block;
}

.custom_date ul li span.lead {
  font-size: 1rem;
  line-height: 16px;
}

.custom_date ul li.active {
  background: #f44336;
  border-color: #f44336;
  color: white;
}

Answer 1

要实现此目的，还需要使月份和日期名称具有动态性。为此，您可以使用日期对象的getMonth()和getDay()属性。还要注意，日期对象本身需要循环生成。实现此目的的最简单方法是修改HTML，使其更加“干燥”。使每个li遵循相同的结构并遍历它们，将集合中元素的索引作为要添加到日期的天数。试试这个：

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

$('.date-box').each(function(i) {
  var newDate = new Date();
  newDate.setDate(newDate.getDate() + (i + 2));  

  var $date = $(this);
  $date.find('.month').text(monthNames[newDate.getMonth()]);
  $date.find('.date').text(newDate.getDate());
  $date.find('.day').text(dayNames[newDate.getDay()]);
});

.custom_date,
.custom_time {
  width: 1000px;
}

.custom_date ul {
  margin: 0px;
  padding: 0px;
}

.custom_date ul li {
  list-style: none;
  float: left;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 0px 5px;
  width: 60px;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  min-height: 55px;
}

.custom_date ul li:nth-child(1) span,
.custom_date ul li:nth-child(2) span {
  padding-top: 28%;
}

.custom_date ul li span {
  display: block;
}

.custom_date ul li span.lead {
  font-size: 1rem;
  line-height: 16px;
}

.custom_date ul li.active {
  background: #f44336;
  border-color: #f44336;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="custom_date">
  <ul>
    <li>
      <span>Today</span>
    </li>
    <li>
      <span>Tomorrow</span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
    <li class="date-box">
      <span class="month"></span>
      <span class="date"></span>
      <span class="day"></span>
    </li>
  </ul>
</div>