先上效果圖

如何實現這種動態生成的日期,當前日期高亮的效果本人前端入門，代碼可能比較笨,歡迎大佬指正新方法
html代碼

<div class="seckill"><h4>勁<span>情</span>秒殺</h4><div class="seckill_box"><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a></div></div>

css代碼

.seckill{position: relative;width:100%;margin-top:16px; } .seckill>h4{position: absolute;top:-2px;left:15px;display: inline-block;width:12.8%;font-size: 18px;color:rgb(202,21,30);font-weight: bold;font-family: "PingFang-SC-Heavy"; } .seckill>h4::before{position: absolute; right:-7px; content:"";width:10px;height:10px;border:2px solid rgb(0,0,0);border-radius: 50%; } .seckill>h4>span{color:rgb(6,6,6); } .seckill>.seckill_box{height: 50px;white-space: nowrap;overflow-x: scroll;overflow-y: hidden;margin-left:20.8%;padding-top:4px;border-left:1px solid rgb(220,220,220);padding-left:5px; } .seckill>.seckill_box::-webkit-scrollbar{display: none;} .seckill>.seckill_box>a{display: inline-block;width:80px;height:42px;font-size:14px;line-height: 42px;text-align: center;border-radius: 5px;color:rgb(102,102,102);background:rgb(102,102,102,0.1);margin-right:6px;font-family: "PingFang-SC-Regular";cursor: pointer; } .seckill>.seckill_box>a.active{color:rgb(202,21,30);background:rgb(202,21,30,0.1); }

js

/*實現動態高亮顯示當前日期 */var myDate = new Date;var year = myDate.getFullYear();//獲取當前年var mon = myDate.getMonth() + 1; //獲取當前月var date = myDate.getDate(); //獲取當前日var $length = $(".seckill>.seckill_box>a").length;var lastDay = new Date(year, mon, 0);var lastDay = lastDay.toString();//將對象轉換成字符串var last = lastDay.substring(7,10)//獲取到最后一天的字符串$(".seckill>.seckill_box>a:first-child").html(mon + "月" + date + "日").addClass("active");//讓當前日期高亮顯示for(var i = 1 ; i < $length;i++){//循環生成秒殺下的avar index = i + 1;var newDate = date + index - 1;if(newDate <= last){//如果當前的幾個日期都沒有大于最后一天的數字$(".seckill>.seckill_box>a:nth-of-type("+index+")").html(mon + "月" + newDate + "日");}else{//相反如果其中有一個日期的數字大于最后一天就月份+1,日期-去最后一天。var newDate = newDate - last;if(mon + 1 <= 12){$(".seckill>.seckill_box>a:nth-of-type("+index+")").html(mon+1 + "月" + newDate + "日");}else{$(".seckill>.seckill_box>a:nth-of-type("+index+")").html(mon-11 + "月" + newDate + "日");}}}

總結

以上是生活随笔為你收集整理的关于显示当前日期并且自动生成后面的日期,月份也正常显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。