一个简陋的万年历（因不擅长美工，所以简陋）
<!DOCTYPE html><html>
<head>
<meta charset="gb2312">
<title>WP231957'S 万年历</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
div{
text-align: center;
}
table {
margin: auto;
margin-top:20px;
}
body{text-align: center;}
select{
margin-top:100px;
}
select{
height:40px;
width:100px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
var myDate = new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var date=myDate.getDate();
str="";
for (i=1950;i<2049;i++){
str+="<option value='"+i+"'>"+i+"年</option>";
}
$("#year_select").append(str);
//设置当前select的默认value值(显示值)
$("#year_select").find("option:contains('"+year+"年')").attr("selected",true);
str="";
for (i=1;i<13;i++){
str+="<option value='"+i+"'>"+i+"月</option>";
}
$("#month_select").append(str);
//设置当前select的默认value值(显示值)
$("#month_select").find("option:contains('"+month+"月')").attr("selected",true);
gradeChange();
});
function gradeChange(){
trs=document.getElementsByTagName("tr");
dates=1;
tc=0;
for(var x=1;x<trs.length;x++){
tds=trs.getElementsByTagName("div"); //取表格每一行的单元格数量 这里用div模拟单元格
//取select标签所选option的value，其typeof是string所以下面用parseInt 转换
year=document.getElementById("year_select").options.value;
month=document.getElementById("month_select").options.value;
days=get_day(parseInt(year), parseInt(month)); //获取当下年月是多少天
shou=getweek2(parseInt(year), parseInt(month),1);//确定每月1日是星期几
var tmp;
if(x==1){//确定每月1日是星期几
tmp=shou-1;
}
else{
tmp=0;
}
// 1 日之前的用空格填充
for(var m=0;m<tmp;m++)
{
tds.innerHTML=" ";
}
if(tc==0){
trs.style.display="";//恢复隐藏列
for(var y=tmp;y<tds.length;y++){
function isend(y1,days1,dates1){
if (y1==6 && days1==dates1){
return true;
}
else{
return false;
}
}
//tc=1 表明表格填充完毕
tds.innerHTML=dates;
if(dates>days || isend(y,days,dates)==true){
console.log(tds.innerText);
tc=1;
break;
}
dates++;
}
//31(30,28,29)日之后的单元格用空格填充
if (y<6){
for(var m=y;m<tds.length;m++)
{
tds.innerHTML=" ";
}
}
}
else{
//隐藏列
/*
for(var m=0;m<tds.length;m++)
{
tds.innerHTML="*"; //这里使用空格撑不开div 所以索性隐藏起来
}
*/
trs.style.display="none";
}
}
};
//采用蔡基姆拉尔森计算公式
function getweek2(year,month,day)
{
if ((month === 1) || (month === 2))
{
month += 12;
year--;
}
var w = (day + 2 * month + parseInt((month + 1)*3 / 5 )+ year + parseInt(year / 4) - parseInt(year / 100) + parseInt(year / 400)+1) % 7;
if (w==0){w=7;}
return w;
}
//获取公历年某整月的天数
functionget_day(year,month)
{
var rui=;
var ping=;
var ruiflag=0;
if((year%4==0 && year%100!=0) || year%400==0){
ruiflag=1;
}
if(ruiflag==1){
return rui;
}else{
return ping;
}
}
</script>
<select id="year_select" onchange="gradeChange()" style="margin-right:40px" class="year_month_select">
</select>
<select id="month_select"onchange="gradeChange()">
</select>
<table border="1">
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期七</td>
</tr>
<tr> <!-- 第一行>-->
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
</tr>
<tr> <!-- 第2行>-->
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
</tr>
<tr> <!-- 第3行>-->
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
</tr>
<tr> <!-- 第4行>-->
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
</tr>
<tr> <!-- 第5行>-->
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
</tr>
<tr> <!-- 第6行>-->
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
<tdclass="blcok">
<div>1</div>
</td>
</tr>
</body>
</html> 附我调试最后通过的一个失败案例
页:
[1]