实践js实现windows系统日历

Posted 2020-08-29 Stitch晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实践js实现windows系统日历相关的知识，希望对你有一定的参考价值。

思路：
1、定义好每一个月份的日期天数

2、获取当前的系统日期初始化数据

3、输出日历
2.1、先获取当前月的第一天是星期几（这一点与日历的排版至关重要！）
2.2、获取当前月的天数
2.3、获取当前月有多少个星期（即要输出多少行行数这里我会预留多一行）
2.4、获取当前年份和月份用作显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 日历</title>
    <style type="text/css">
     *{
         border: 0;
         padding: 0;
         margin: 0;
         font-family: "微软雅黑";
     }
     a{
         text-decoration: none;
         color: #000;
     }
     li{
         list-style-type: none;
     }
     .calendar_wrap{
         width: 350px;
         margin: 0 auto;
         padding: 0;
         border: 1px solid #000;
     }
     .calendar_list{
         width: 100%;
         margin-top: 10px;
     }
     .calendar_list tr{
         width: 100%;
     }
     .calendar_list tr td{
         text-align: center;
         height: 45px;

     }
     .control_bar{
         word-spacing: -6px;
     }
     .control_bar span,.control_bar b{
         display: inline-block;
         text-align: center;
         word-spacing: 0px;
     }
     .left-bt,.right-bt{
         width: 50px;
     }
     #reduce_bt,#add_bt{
         width: 50%;
         height: 25px;
         border-radius: 50%;
     }
     #reduce_bt:focus{
         outline: none;
     }
     #add_bt:focus{
         outline: none;
     }
     #current_date{
         width: 250px;
     }
     #resetBt{
         display: block;
         text-align: center;
         color: #fff;
         cursor: pointer;
         width: 120px;
         line-height: 40px;
         background-color: #FF7F27;
         margin: 0 auto;
     }
     #date_list tr td:hover{
         background-color: #ccc;
         cursor: default;
     }
    </style>
</head>
<body>
    <div class="calendar_wrap">
    <div class="control_bar">
      <span class="left-bt"><input type="button" id="reduce_bt" value="<"></span>
      <b id="current_date">2017-02</b>
      <span class="right-bt"><input type="button" id="add_bt" value=">"></span>
    </div>
    <table class="calendar_list" cellspacing="0">
      <thead>
         <tr>
           <td>日</td>
           <td>一</td>
           <td>二</td>
           <td>三</td>
           <td>四</td>
           <td>五</td>
           <td>六</td>
         </tr> 
      </thead>
      <tbody id="date_list"></tbody>   
    </table>
   </div>
   <span id="resetBt">回到现在日期</span>
   <script type="text/javascript">
     var dateScreen = document.getElementById(‘current_date‘);//获取显示当前年份月份的div
     var reduceBt = document.getElementById(‘reduce_bt‘);//获取减少月份的按钮
     var addBt = document.getElementById(‘add_bt‘);//获取增加月份的按钮
     var dateList = document.getElementById(‘date_list‘);//获取显示所有日期部分
     var resetBt = document.getElementById(‘resetBt‘);//获取重设按钮
     //定义好每月的日期总数 总数按js 获取月份数值的下标方式储存
     var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31];
     var add_date = 1;//定义添加日期数的初始化
     

     //初始化日历
     //获取现在的日期
     var now_date = new Date();
     var nowFullYear = now_date.getFullYear();
     var nowMonth = now_date.getMonth();
     //执行日历输出函数
     printCalendar();
     //-----------------------------------
     
     
     

     //月份减少按钮点击事件
     reduceBt.onclick = function(){
         nowMonth = nowMonth - 1;
         if (nowMonth == -1) {
             nowFullYear = nowFullYear - 1;
             nowMonth = 11;
         }
        clearRows();
         printCalendar();
     }
     

     //增加月份按钮点击事件
     addBt.onclick = function(){
         nowMonth+= 1;
         if (nowMonth == 12) {
             nowFullYear+= 1;
             nowMonth = 0;
         } 
         clearRows();
        printCalendar();
     }


     //重设按钮点击事件
     resetBt.onclick = function(){
         var resetDate = new Date();
         nowFullYear = resetDate.getFullYear();
         nowMonth = resetDate.getMonth();
         clearRows();
         printCalendar();
     }




     function printCalendar(){
         var printDate = new cur_date(nowFullYear,nowMonth);//实例cur_date方法
         var printFirstDay = printDate.firstDay;//获取要输出月份第一天的星期
         var printTotalDate = printDate.totalDate;//获取输出日期的总数
         var printMonth = printDate.cur_month;//获取输出的月份
         (printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1)));
         //调整月份的显示格式
         var printYear = printDate.cur_year;//获取输出的年份
        var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1;
        //获取行数
        //利用天数除以7天获得行数并将它向上去整 但是上限是5
        //而考虑到某些月会有6行所以在总行数里面加1 以防万一

        //开始输出
        //首先显示出年和月
        dateScreen.innerText = printYear + "-" + printMonth;

        
        
            //开始输出日期
            for (var i = 0; i < totalRows; i++) {
               dateList.insertRow(i);
             for (var j = 0; j < 7; j++) {
                 //当天数总量大于额定总量时先终止内部循环
                if (add_date > printTotalDate) {
                    break;
                }

                dateList.rows[i].insertCell(j);

                //改变周日和周六的文字颜色
                if (j == 0) {
                    dateList.rows[i].cells[j].style.color = "red";
                    dateList.rows[i].cells[j].style.fontWeight = "bold";
                }else if(j == 6){
                    dateList.rows[i].cells[j].style.color = "green";
                    dateList.rows[i].cells[j].style.fontWeight = "bold";
                }

                
                if (i == 0 && j >= printFirstDay) {
                    //当此时是第一行时而且单元格下标大于等于当前月第一天的星期就开始为单元格填入文本
                    dateList.rows[i].cells[j].innerText = add_date;
                    add_date++;
                }else if(i > 0){
                    //第一行以后的单元格就按循环添加即可
                    dateList.rows[i].cells[j].innerText = add_date;
                    add_date++;
                }
                
                
                

             }
                 
           }
        
        
        add_date = 1;//输出完把日期总数重新赋值为1
     }


     //获取当前年、月、第一天是星期几、日期总数
     function cur_date(curYear,curMonth){
         this.cur_firstDate = new Date(curYear,curMonth,1);//获取现在日期的第一天
         this.cur_year = curYear;//获取当前的年
         this.cur_month = curMonth;//获取当前的月
         this.totalDate = is_leapYear(curYear,curMonth);//获取总天数
         this.firstDay = this.cur_firstDate.getDay()//获取每个月的第一天是星期几
     }
     
     //判断今年是否为闰年
     function is_leapYear(target_year,target_month){
         if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) {
                   //当前月是2月且当前年是闰年
                   return 29;
         }else{
             //其他月按正常日期总数输出
             return overall_date[target_month];
         }
     }

     function clearRows(){
         var rowsNum = dateList.rows.length;
        while(rowsNum > 0){
            dateList.deleteRow(rowsNum - 1);
            rowsNum--;
        }
     }

   </script>
</body>
</html>

以上是关于实践js实现windows系统日历的主要内容，如果未能解决你的问题，请参考以下文章

vue初学实践之路——vue简单日历组件

angularJS使用ocLazyLoad实现js延迟加载

js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)

原生js简易日历效果实现

帮忙改一下js日历的日期的显示格式