|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- <!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[x].getElementsByTagName("div"); //取表格每一行的单元格数量 这里用div模拟单元格
- //取select标签所选option的value,其typeof是string 所以下面用parseInt 转换
- year=document.getElementById("year_select").options[document.getElementById("year_select").selectedIndex].value;
- month=document.getElementById("month_select").options[document.getElementById("month_select").selectedIndex].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[m].innerHTML=" ";
- }
- if(tc==0){
- trs[x].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[y].innerHTML=dates;
- if(dates>days || isend(y,days,dates)==true){
- console.log(tds[6].innerText);
- tc=1;
- break;
- }
-
- dates++;
- }
- //31(30,28,29)日之后的单元格用空格填充
- if (y<6){
- for(var m=y;m<tds.length;m++)
- {
- tds[m].innerHTML=" ";
- }
- }
- }
- else{
- //隐藏列
- /*
- for(var m=0;m<tds.length;m++)
- {
- tds[m].innerHTML="*"; //这里使用空格撑不开div 所以索性隐藏起来
- }
- */
- trs[x].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;
- }
-
- //获取公历年某整月的天数
- function get_day(year,month)
- {
- var rui=[31,29,31,30,31,30,31,31,30,31,30,31];
- var ping=[31,28,31,30,31,30,31,31,30,31,30,31];
- var ruiflag=0;
- if((year%4==0 && year%100!=0) || year%400==0){
- ruiflag=1;
- }
- if(ruiflag==1){
- return rui[month-1];
- }else{
- return ping[month-1];
- }
- }
-
- </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> <!-- 第一行>-->
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- </tr>
- <tr> <!-- 第2行>-->
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- </tr>
- <tr> <!-- 第3行>-->
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- </tr>
- <tr> <!-- 第4行>-->
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- </tr>
- <tr> <!-- 第5行>-->
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- </tr>
- <tr> <!-- 第6行>-->
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- <td class="blcok">
- <div>1</div>
- </td>
- </tr>
- </body>
- </html>
复制代码 |
|