版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82183843
制作日历
js部分
window.onload = function () {
//判断闰年
function checkYear(_year) {
if (_year % 400 === 0 || (_year % 4 === 0 && _year % 100 !== 0)) {
return true;
}
}
//判断某年某月的第一天是星期几
function getFirstDay(year, month) {
var allDays;
var y = year - 1;
allDays = y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) + 1; //牛逼的公式 没看懂 看懂的可以留言解释一下
for (var i = 1; i < month; i++) {
switch (i) {
case 1:
allDays += 31;
break;
case 2:
if (checkYear(year)) {
allDays += 29;
} else {
allDays += 28;
}
break;
case 3:
allDays += 31;
break;
case 4:
allDays += 30;
break;
case 5:
allDays += 31;
break;
case 6:
allDays += 30;
break;
case 7:
allDays += 31;
break;
case 8:
allDays += 31;
break;
case 9:
allDays += 30;
break;
case 10:
allDays += 31;
break;
case 11:
allDays += 30;
break;
case 12:
allDays += 31;
break;
}
}
return allDays % 7;
}
//显示日历
function showCalendar(year, month, day) {
var monthDay = 0, content = [];
var table = document.getElementById('father');
var num = [];
var count = 1;
//月份对应的天数
switch (month) {
case 1:
monthDay = 31;
break;
case 2:
if (checkYear(year)) {
monthDay = 29;
} else {
monthDay = 28;
}
break;
case 3:
monthDay = 31;
break;
case 4:
monthDay = 30;
break;
case 5:
monthDay = 31;
break;
case 6:
monthDay = 30;
break;
case 7:
monthDay = 31;
break;
case 8:
monthDay = 31;
break;
case 9:
monthDay = 30;
break;
case 10:
monthDay = 31;
break;
case 11:
monthDay = 30;
break;
case 12:
monthDay = 31;
break;
}
//获取第一天
var firstDay = getFirstDay(year, month);
var tr = Math.ceil((monthDay + firstDay) / 7);
var k = firstDay;
//获取日历样式数组保存的数据
for (var j = 0; j < tr; j++) {
num[j] = new Array(7);
do {
if (count <= monthDay) {
num[j][k] = count;
k++;
count++;
} else {
break;
}
} while (k < 7);
k = 0;
}
//创建日历内容
for (var e = 0; e < tr; e++) {
content[e] = '<tr>\n' +
' <td>' + num[e][0] + '</td>\n' +
' <td>' + num[e][1] + '</td>\n' +
' <td>' + num[e][2] + '</td>\n' +
' <td>' + num[e][3] + '</td>\n' +
' <td>' + num[e][4] + '</td>\n' +
' <td>' + num[e][5] + '</td>\n' +
' <td>' + num[e][6] + '</td>\n' +
' </tr>';
}
var str = content.join('');
str = str.replace(/undefined/g, '');
//输出日历表格
table.innerHTML = ' <caption>' + year + '-' + month + '-' + day + '</caption>\n' +
' <thead>\n' +
' <tr>\n' +
' <td>日</td>\n' +
' <td>二</td>\n' +
' <td>三</td>\n' +
' <td>四</td>\n' +
' <td>五</td>\n' +
' <td>六</td>\n' +
' <td>一</td>\n' +
' </tr>\n' +
' </thead>\n' +
' <tbody id="todayStyle">\n' +
' ' + str + '\n' +
' </tbody>';
//设置当天的样式
var td = (day + firstDay) % 7 === 0 ? 6 : (day + firstDay) % 7-1;
var todayStyle = document.getElementById('todayStyle').children[Math.ceil((day + firstDay) / 7-1)].children[td];
todayStyle.style.backgroundColor = '#111';
todayStyle.style.borderRadius = '10px';
}
//设置时间
var content = document.getElementById('content');
var btn = document.getElementById('btn');
btn.onclick = function () {
var text = content.value;
if (text.match(/[0-9]{4}\s{1,100}[0-9]{1,2}\s{1,100}[0-9]{1,2}/g) && Number(text.slice(0, 4)) > 1971) {
var arr = text.split(' ');
showCalendar(Number(arr[0]), Number(arr[1]), Number(arr[2]));//查找时间
} else {
alert('输出格式错误 参见:2018 3 5');
}
content.value = '';
};
var date = new Date();
showCalendar(date.getFullYear(), date.getMonth() + 1, date.getDate());//默认今天的日期
}
css部分
table {
margin: 60px auto;
text-align: center;
background-color: #555;
border-radius: 20px;
padding: 20px;
}
table > caption {
font-size: 30px;
color: #ccc;
margin-bottom: 20px;
}
thead > tr > td {
width: 100px;
height: 70px;
font-size: 20px;
font-weight: bold;
color: #cee;
}
tbody > tr > td {
width: 100px;
height: 40px;
color: #ece;
}
body {
text-align: center;
}
label {
font-size: 20px;
color: #888;
}
label input{
height: 30px;
margin: 20px;
font-size: 20px;
text-align: center;
color: #888;
}
label:first-child input {
width: 200px;
}
label:last-child input{
width: 80px;
height: 40px;
}
label input::placeholder {
color: #CCCCCC;
}
html部分
<table id="father"></table>
<label>请输出查找日期:<input type="text" placeholder="( 例如:2018 3 5 )" id="content"></label>
<br>
<label><input type="button" value="确定" id="btn"></label>
二维数组定义方法
var arr=[];
for(var i=0;i<num1;i++){
arr[i]=[];
for(var j=0;j<num2;j++){
console.log(arr[i][j]);
}
}