前端demo给阿姨结算工资_前端结算清单怎么做-优快云博客

一需求分析

背景，阿姨做6休一，需要26天结算一次工资。方便结算工资，对账。

需求：

1.显示日历

2.选择日历上的日期

3.选择开始日期结束日期，从开始日期到结束日期进行编号。

4.选择休假日期，更新编号

5.打印工资单

2022.08.26

只会简单的三件套。这个需求也不知道好做不。希望自己能把它做出来。

二代码实现

1.基本的日历实现

参考 (50条消息) 前端实现日历_lzsan_的博客-优快云博客_前端日历

（1）获取今天的年月日

var today=new Date();
var year=today.getFullYear();//获得年份
var month=today.getMonth()+1;//获得月份，getMonth是从0-11的
var day=today.getDate();//获得当前日

（2）根据月份和年份，获取当月总天数

1、3、5、7、8、10、12 是31天，4、6、9、11是30天

闰年的2月是29天，平年的2月是28天.润年是能被4整除，不能被100整除的年份，或者是能被400整除的年份。

function count(){
    if(month!=2){
        if((month==4)||(month==6)||(month==9)||(month==11)){
            days=30;
        }else{
            days=31;
        }
    }else{
        if((year%4)==0&&(year%100)!=0||year%400==0){
            days=29;
        }else{
            days=28;
        }
    }
}

（3）创建每一天的日期元素class="everyday"

这里每月从第一天开始显示，不显示上月的日期。首先计算每月第一天是星期几，前边的那几天空出来。

空出来的方法就是不设置 innerHTML的值

    var firstdate=new Date(year,month-1,1);
    var xq=firstdate.getDay();
    var daterow=document.getElementById("day");
    daterow.innerHTML="";
    if(xq!=0){
        for(var i=0;i<xq;i++){
            var dayElement=document.createElement("div");
            dayElement.className="everyday";
            daterow.appendChild(dayElement);
        }
    }

然后根据日期创建everyday元素，设置dayElement.innerHTML=j+"";

for(var j=1;j<=days;j++){
        var dayElement=document.createElement("div");
        dayElement.className="everyday";
        dayElement.innerHTML=j+"";
        if(j==day){
            dayElement.style.color="red";
        }
        daterow.appendChild(dayElement);
    }

(4) 实现7天换行

这里是通过限制元素的宽度来实现的。最外层的calendar400px，每一天的元素56 56*7=392

#calendar{ 
    border-bottom: 1px black solid;
    width:400px;
    margin:auto;
}

.everyday{
    width:56px;
    float: left;
}

（5）切换月份的时候元素都是重新生成的，即重新执行一次（3）。所以无法记录上个月和下个月的信息。

2.添加点击事件

第一步实现的基本日历有两个问题1.每一天的元素class都是一样的2.没有上个月和下个月的信息，我要26天算一次工资，选中的日期大概率是跨月的。