说明
三班倒日历:相同的背景颜色代表相同的含义
举例:
2019年2月17日 夜班-蓝色
2019年2月18日 休息-粉红色
2019年2月19日 白班-红色
1.效果图
2.html代码
仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日历</title>
<style type="text/css">
body{
text-align: center;
}
div{
margin: 0 auto;
}
table{
border: solid 1px;
}
tr{
border: solid 1px
}
td{
border: solid 1px;
padding: 5px;
margin: 3px;
}
select{
width: 100px
}
/* 蓝色粉色红色=休班夜班白班 */
.night{
background-color: LightPink
}
.white{
background-color: OrangeRed
}
.rest{
background-color: DeepSkyBlue
}
</style>
</head>
<body>
<div class="content">
<table>
<thead>
<tr>
<th colspan="3">
<select id="year" onchange="resetTable()">
</select>
</th>
<th></th>
<th colspan="3">
<select id="month" onchange="resetTable()">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
</th>
</tr>
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript">
$(function() {
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var yearStr = '';
for (var i = currentYear - 10; i < currentYear + 10; i++) {
yearStr += '<option value="'+i+'" >'+i+'年</option>';
}
$("#year").html(yearStr).val(currentYear);
$("#month").val(currentDate.getMonth() + 1);
resetTable();
});
function getDaysInOneMonth(year, month){
month = parseInt(month, 10);
var d= new Date(year, month, 0);
return d.getDate();
}
function resetTable() {
var year = $("#year").val();
var month = $("#month").val();
//该年该月的天数
var day = getDaysInOneMonth(year, month);
console.log("year:"+year+" month:"+month+" day:"+day);
var firstDayOfMonth = new Date(year, month-1, 1);
//该月第一天是周几?0表示周日,1表示周一……6表示周六
var dayWeek = firstDayOfMonth.getDay();
console.log("dayWeek:"+dayWeek);
var trStr = "";
if (dayWeek == 0) {
trStr = '<tr>'+
'<td>1</td>'+
'<td>2</td>'+
'<td>3</td>'+
'<td>4</td>'+
'<td>5</td>'+
'<td>6</td>'+
'<td>7</td>'+
'</tr>';
}
if (dayWeek == 1) {
trStr = '<tr>'+
'<td></td>'+
'<td>1</td>'+
'<td>2</td>'+
'<td>3</td>'+
'<td>4</td>'+
'<td>5</td>'+
'<td>6</td>'+
'</tr>';
}
if (dayWeek == 2) {
trStr = '<tr>'+
'<td></td>'+
'<td></td>'+
'<td>1</td>'+
'<td>2</td>'+
'<td>3</td>'+
'<td>4</td>'+
'<td>5</td>'+
'</tr>';
}
if (dayWeek == 3) {
trStr = '<tr>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td>1</td>'+
'<td>2</td>'+
'<td>3</td>'+
'<td>4</td>'+
'</tr>';
}
if (dayWeek == 4) {
trStr = '<tr>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td>1</td>'+
'<td>2</td>'+
'<td>3</td>'+
'</tr>';
}
if (dayWeek == 5) {
trStr = '<tr>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td>1</td>'+
'<td>2</td>'+
'</tr>';
}
if (dayWeek == 6) {
trStr = '<tr>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td></td>'+
'<td>1</td>'+
'</tr>';
}
for (var i=(8-dayWeek); i<=day; i++) {
trStr += '<tr>'+
'<td>'+i+'</td>';
if (i+1 <= day) {
trStr += '<td>'+(i+1)+'</td>';
}
if (i+2 <= day) {
trStr += '<td>'+(i+2)+'</td>';
}
if (i+3 <= day) {
trStr += '<td>'+(i+3)+'</td>';
}
if (i+4 <= day) {
trStr += '<td>'+(i+4)+'</td>';
}
if (i+5 <= day) {
trStr += '<td>'+(i+5)+'</td>';
}
if (i+6 <= day) {
trStr += '<td>'+(i+6)+'</td>';
}
trStr += '</tr>';
i = i+6;
}
$("#tbody").html(trStr);
//设置颜色
setTdColor(year, month);
}
function setTdColor(year, month) {
var time1 = Date.parse(new Date("2018-12-31"));
var td;
var tdText;
var day;
var time2;
var nDays;
$.each($("#tbody").find("tr td"), function() {
td = $(this);
day = td.html();
if (day) {
time2 = Date.parse(new Date(year, month-1, day));
nDays = Math.abs(parseInt((time2 - time1)/1000/3600/24));
console.log("nDays"+nDays);
if (nDays % 3 == 0) {
td.addClass("night");
}
if (nDays % 3 == 1) {
td.addClass("white");
}
if (nDays % 3 == 2) {
td.addClass("rest");
}
}
});
}
</script>
</body>
</html>