js中的小案例(一)

2021-03-14 08:38

阅读:531

标签:log   list   color   lse   png   一个   spl   font   orange   

 

效果图:

技术图片

html代码:

        div id="date">
            p>
                span id="prev">上一月span>
                span id="year">2022span>
                span id="next">下一月span>
            p>
            h5 id="month">七月h5>
            ul id="title">
                li>li>
                li>li>
                li>li>
                li>li>
                li>li>
                li>li>
                li>li>
            ul>
            ul id="days">ul>
        div>            

css代码:

        *{
                margin: 0px;
                padding: 0px;
            }
            #date{
                width: 300px;
                padding: 10px;
                border: 1px solid #000000;
            }
            #date>p{
                display: flex;
            }
            #date>p>span{
                display: inline-block;
                width: 100px;
                text-align: center;
            }
            #month{
                text-align: center;
                font-weight: 400;
            }
            #title{
                list-style: none;
                display: flex;
                width: 300px;
                padding: 0;
                margin: 0;
                
            }
            #title>li{
                flex: 1;
                text-align: center;
                width: 100%;
                background: #C0C0C0;
            }
            #days{
                height: 250px;
                margin-top: 10px;
            }
            
            #days>li{
                list-style: none;
                text-align: center;
                float: left;
                width: 42.28px;
                height: 42.28px;
            }
            .active{
                color:orange;
            }                

javascript代码:

    let date=new Date();
        add();
        function add(){
            
            let year=date.getFullYear()
            document.getElementById("year").innerText=year
            let month=date.getMonth();
            let monthArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
            document.getElementById("month").innerText=monthArr[month];
            // 获取当天的天数
            let currentDay=date.getDate()
            // 获取每个月的第一天是周几
            let week=new Date(year,month,1).getDay();
            let html=""    
            // 代表前面空白的li标签        
            for(var i=0;i){
                console.log(i)
                html+="
  • " } // 获取每个月的天数的最后一天 let lastDay=new Date(year,month+1,0).getDate() for(var i=1;i){ if(i==currentDay){ html+=`
  • ${i}
  • ` }else{ html+=`
  • ${i}
  • ` } } document.getElementById("days").innerHTML=html } document.getElementById("prev").onclick=function(){ date.setMonth(date.getMonth()-1) add(); } document.getElementById("next").onclick=function(){ date.setMonth(date.getMonth()+1) add(); }

    关键代码是

    new Date(year,month,1).getDay()  获取每个月的第一个天是星期几

    new Date(year,month+1,0).getDate()  获取每个月的最后一天是几号

    js中的小案例(一)

    标签:log   list   color   lse   png   一个   spl   font   orange   

    原文地址:https://www.cnblogs.com/shanchui/p/12812516.html


    评论


    亲,登录后才可以留言!