鱼C论坛

 找回密码
 立即注册
查看: 2484|回复: 1

[作品展示] 一个简陋的万年历(因不擅长美工,所以简陋)

[复制链接]
发表于 2020-3-13 20:20:28 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2020-3-13 20:21:39 | 显示全部楼层
附我调试最后通过的一个失败案例

无标题.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 08:11

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表