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

Question

我没有几列日期说明如何在JavaScript中根据当前日期动态显示？ 答案将不胜感激！

 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; } 

 <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> <span class="thisMonth"></span> <span class="lead toadayDate3"></span> <span>Fri</span> </li> <li> <span class="thisMonth"></span> <span class="lead toadayDate4"></span> <span>Sat</span> </li> <li> <span class="thisMonth"></span> <span class="lead toadayDate5"></span> <span>Sun</span> </li> <li> <span class="thisMonth"></span> <span class="lead toadayDate6"></span> <span>Mon</span> </li> <li> <span class="thisMonth"></span> <span class="lead toadayDate7"></span> <span>Fri</span> </li> </ul> </div> 

Answer 1

为此，您还需要使月份和日期名称动态化。 为此，您可以使用date对象的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>