代码里详细注释了日历表的生成原理，若是还不懂可留言
效果图如下，没有美化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
html,body{
width:98%;
height:98.9%
}
body{
background: url(img/bg.jpg) no-repeat top left;
background-size: cover;
}
#main{
position: absolute;
top:40%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
}
tr{
text-align: center;
}
#year{
position: absolute;
margin-left:0%;
margin-top: 2px;
}
#month{
position: absolute;
margin-top: 2px;
margin-left: 0.3%;
}
#clock{
font-size: 20px;
}
</style>
<body>
<div id="main" align="center">
<div id="clock">
<span id="date"></span>
</div>
<hr />
<div style="margin-left: -2%;">
<span>选择日期：</span>
<select id="year" onmousedown="if(this.options.length>3){this.size=8}" onblur="this.size=1" onchange="this.size=1">
</select>
<span style="margin-left: 3.8%;">年</span>
<select id="month" onmousedown="if(this.options.length>3){this.size=5}" onblur="this.size=1" onchange="this.size=1">
</select>
<span style="margin-left: 3.2%;">月</span>
</div>
<div id="calendar" style="padding-top: 20px;">
<table width="500" border="0" id="calendar_table"><!-- 创建一个6行7列表格，显示日历 -->
<tbody>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var seledate = new Date();
var maxyear = 2050;
var nowYear = seledate.getFullYear();
var nowmonth = seledate.getMonth() + 1;
var seleYear = document.getElementById('year');
var selemonth = document.getElementById('month');
var setmonth = nowmonth;
var setyear = nowYear;
var flag = 0;//给创建的option依次分配索引号，即1970年索引号为0
//生成年份下拉框
for (var min = 1970; min <= maxyear; min++) {
//下拉框年赋值
if (min == nowYear) {//判断值是否等于今年
seleYear.innerHTML += "<option>" + min + "</option>";
document.getElementsByTagName('option')[flag].setAttribute("value", min);
document.getElementsByTagName('option')[flag].setAttribute("onclick", 'option()');//给每个option添加点击事件
document.getElementsByTagName('option')[flag].setAttribute("id", 'nowYear');//给今年的option赋予id
document.getElementById("nowYear").setAttribute("selected", "selected");//给下拉框默认显示今年
} else {
seleYear.innerHTML += "<option>" + min + "</option>";
document.getElementsByTagName('option')[flag].setAttribute("value", min);
document.getElementsByTagName('option')[flag].setAttribute("onclick", 'option()');
}
flag++;
}
for (var n = 1; n < 12; n++) {
//下拉框月赋值
if (n == nowmonth) {
selemonth.innerHTML += "<option>" + n + "</option>";
document.getElementsByTagName('option')[flag].setAttribute("value", n);
document.getElementsByTagName('option')[flag].setAttribute("onclick", 'option1()');
document.getElementsByTagName('option')[flag].setAttribute("id", "nowMonth");//给当前月设置id
document.getElementById("nowMonth").setAttribute("selected", "selected");//下拉框默认显示今年
} else {
selemonth.innerHTML += "<option>" + n + "</option>";
document.getElementsByTagName('option')[flag].setAttribute("value", n);
document.getElementsByTagName('option')[flag].setAttribute("onclick", 'option1()');
}
flag++;
}
//选择年
function option() {
var index = document.getElementById("year").selectedIndex;//获得选中年份的索引号
setyear = document.getElementById("year").options[index].value//根据索引号获取选中的值
calendar();
}
//选择月份
function option1() {
var index = document.getElementById("month").selectedIndex;//获得选中月份的索引号
setmonth = document.getElementById("month").options[index].value//根据索引号获取选中的值
calendar();
}
var date = document.getElementById('date');
//当前时间
function time() {
var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth() + 1;
var day = mydate.getDate();
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
date.innerHTML = "当前时间:" + year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
}
window.setInterval("time()", 1000);
//日历表
function calendar() {
var table = document.getElementById('calendar_table');
var td = table.getElementsByTagName('td');//获取每个td表格,共35
var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var day = mydate.getDate();
year = setyear;//赋值选中的年份
month = setmonth - 1;//赋值选中的月份
var firstDay = new Date(year, month, 1); // 当前月第一天
console.log(firstDay);
var maxDay = new Date(year, month +1, 0).getDate();
//0为获取上一月最后一天，getDate获取选择月天数，当前月份+1，maxDay即为选择月最大天数
for (var i = 0; i < td.length; i++) {
/*最后一个参数 i+1-firstDay.getDay()，.getDay()是表示当前月第一天星期几（0-6,0为星期天，1为星期一），
“1-”即为把星期0-6直接转为号数，假如2020年3月1日为星期天，即firstDay.getDay()为0，i初始为0，1-0即为1号。
*/
var _thisDay = new Date(year, month,i+1- firstDay.getDay());
if ((i + 1 - firstDay.getDay()) < 1) {
/*这里负数原因，例如2020年4月1日，是星期三，所以firstDay.getDay()为3，i初始为0，1-3即为-2号。
在Date对象中，表示号数为小于1时，表示上一月，例如0表示上一月（即3月）最后一天号数（31），-1即为上一月倒数第二天号数（30），
-2即为上一月倒数第三天号数（29）
由此判定，小于1即为上一月日历，所以用灰色显示
*/
td[i].innerHTML = "<style>font{color:#a5a1a3}</style><font>" + _thisDay.getDate() + "</font>";
} else if ((i + 1 - firstDay.getDay()) > maxDay) {
/*还是例如2020年4月最大30天即maxDay为30，在Date对象中，超出本月最大天数的数即为下一月开始，如31即表示为5月1号，
32表示为5月2日，下一月的号数也用灰色显示
*/
td[i].innerHTML = "<style>font{color:#a5a1a3}</style><font>" + _thisDay.getDate() + "</font>";
} else if (year == mydate.getFullYear() && month == mydate.getMonth() && (i + 1 - firstDay.getDay()) == day) {
//当循环的号数为当天查看的号数，显示红色
td[i].innerHTML = "<style>li{color:#ff0000; list-style: none;}</style><li>" + _thisDay.getDate() + "</li>";
} else {
//其他默认颜色
td[i].innerHTML = _thisDay.getDate();
}
}
}
calendar()
</script>
</html>
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
