关于显示当前日期并且自动生成后面的日期,月份也正常显示

最新推荐文章于 2023-06-29 10:19:30 发布

一者

最新推荐文章于 2023-06-29 10:19:30 发布

阅读量216

点赞数

分类专栏： html5 jquery javascript 文章标签： html5 jquery javascript css3

本文链接：https://blog.csdn.net/weixin_44302838/article/details/110004139

版权

html5 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

先上效果图
在这里插入图片描述
如何实现这种动态生成的日期,当前日期高亮的效果本人前端入门，代码可能比较笨,欢迎大佬指正新方法
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);
}

 /*实现动态高亮显示当前日期 */
    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++){//循环生成秒杀下的a
        var 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 + "日");
            }
        }
  
    }