网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
javascript吧 关注：269,299贴子：906,441

【分享】自己记事本手写的“万年历”程序，界面美观，备注详尽

RT


样图


样图



分享下载：http://u.115.com/file/clwuihyh（建议用115优蛋，自己记事本手写，备注详尽）


需要美工改进啊，另外没有加<meta http-equiv="Content-Type" content="text/html;charset:"/>


<html>
<head>
   <title>万年历</title>
   <script language="javascript">
     <!--
     var now, theYear = 0, theMonth = 0, theDay = 0;   // 时间对象，系统时间“年”，系统时间“月”，系统时间“日”
     var days = 0, totalDays = 0, firstDayOfTheMonth = 0;   // 某个月的总天数，某个月1号距1900.1.1的总天数，计算某个月的第一天是星期几
     var rowNum = 0, dateIndex = 1;   // 动态日历表格的总行数，动态画表格时“日”索引的变化
     var tianGanStr = "", diZhiStr = "", shengXiaoStr = "";   // 存放显示天干地支、生肖的字符串
     /* 加载事件 */
     function beginLoad()
     {
       now = new Date();   // 实例化日期对象
       theYear = now.getFullYear();   // 获得系统时间的“年”，4位
       theMonth = now.getMonth() + 1;   // 获得系统时间的“月”
       theDay = now.getDate();   // 获得系统时间的“日”
       theHour = now.getHours();   // 获得系统时间的“时”
       theMinute = now.getMinutes();   // 获得系统时间的“分”
       theSecond = now.getSeconds();   // 获得系统时间的“秒”
       fillYear();   // 动态加载“年”的下拉列表
       fillMonth();   // 动态加载“月”的下拉列表
       fillDay();   // 动态加载“日”的下拉列表
       showSomeOtherInfo();   // 显示天干地支生肖信息及其动态时间（12小时制）
       timeRun();   // 时间动态变化，每秒（参数为1000毫秒）变化一次
       printCalendar();   // 动态打印某年某月的日历
     }
     /* 加载“年”的下拉列表 */
     function fillYear()
     {
       document.getElementById("wnlYear").length = 0;   // 先清空“年”的下拉列表，保证每次变化都是重新填充
       var beginYear = theYear - 5;
       var endYear = theYear + 5;  
       for (var i = beginYear; i <= endYear; i++)   // 每次自动填充以本年为中心的11年的下拉列表项
       {
         document.getElementById("wnlYear").options.add(new Option(i,i));
       }
       document.getElementById("wnlYear").value = theYear;   // 自动选中，被选中的为当前的年份



     }
     /* 加载“月”的下拉列表 */
     function fillMonth()
     {
       document.getElementById("wnlMonth").length = 0;   // 先清空“月”的下拉列表，保证每次变化都是重新填充
       for (var j = 1; j <= 12; j++)   // 每次自动填充12个月的月份
       {
         if (j < 10)
         {
           document.getElementById("wnlMonth").options.add(new Option(" " + j,j));   // 右对齐特效
         }
         else
         {
           document.getElementById("wnlMonth").options.add(new Option(j,j));
         }
       }
       document.getElementById("wnlMonth").selectedIndex = theMonth - 1;   // 自动选中，被选中的为当前的月份
     }
     /* 加载“日”的下拉列表 */
     function fillDay()
     {
       days = getDayNum();   // 某月的总天数自动“重新”计算
       totalDays = 0;   // 某月的第一天距离1900.1.1的总天数自动“重新”计算
       firstDayOfTheMonth = 0;   // 某月的第一天是星期几自动“重新”计算
       dateIndex = 1;   // 动态生成日历，动态画表格时“日”索引重新从1开始
       document.getElementById("wnlDay").length = 0;   // 先清空“日”的下拉列表，保证每次变化都是重新填充
       for (var k = 1; k <= days; k++)
       {
         if (k < 10)
         {
           document.getElementById("wnlDay").options.add(new Option(" " + k,k));   // 右对齐特效
         }
         else
         {
           document.getElementById("wnlDay").options.add(new Option(k,k));
         }        
       }
       if (theDay <= days)   // 特效：年、月变化时，日选中哪一天自动科学的处理
       {



         document.getElementById("wnlDay").selectedIndex = theDay - 1;
       }
       else
       {
         document.getElementById("wnlDay").selectedIndex = 0;
         theDay = 1;
       }
     }
     /* 动态获取每个月的最大天数 */
     function getDayNum()
     {
       var maxDay = 0;
       switch(theMonth)
       {
         case 1:
         case 3:
         case 5:
         case 7:
         case 8:
         case 10:
         case 12:
           maxDay = 31;   // 一三五七八十腊 31天
           break;
         case 4:
         case 6:
         case 9:
         case 11:
           maxDay = 30;
           break;
         default:
           if ((theYear % 4 == 0 && theYear % 100 != 0) || (theYear % 400 == 0))
           {
             maxDay = 29;   // 2月时，闰年29天，4年一次这样的状态
           }
           else
           {
             maxDay = 28;   // 2月时，平年29天，4年三次这样的状态
           }
           break;
       }
       return maxDay;   // 计算出的某个月的总天数返回
     }
     /* 下拉列表“年”的变化 */
     function changeYear()
     {
       theYear = parseInt(document.getElementById("wnlYear").value);   // 全局变量“哪年”发生变化



       fillYear();   // “年”的下拉列表重新被填充
       fillDay();   // “日”的下拉列表重新被填充
       showSomeOtherInfo();   // “年”的变化影响“天干地支生肖层内容显示的变化”
       printCalendar();   // 某月的日历重新被打印
     }
     /* 下拉列表“月”的变化 */
     function changeMonth()
     {
       theMonth = parseInt(document.getElementById("wnlMonth").value);   // 全局变量“哪月”发生变化
       fillDay();   // “日”的下拉列表重新被填充
       printCalendar();   // 某月的日历重新被打印
     }
     /* 下拉列表“日”的变化 */
     function changeDay()
     {
       theDay = parseInt(document.getElementById("wnlDay").value);   // 全局变量“哪日”发生变化
     }
     /* 天干地支、生肖层内容的动态显示 */
     function showSomeOtherInfo()
     {
       calcTianGan();   // 计算农历上“天干”
       calcDiZhi();   // 计算农历上“地支”
       document.getElementById("wnlShengXiao").innerHTML = tianGanStr + diZhiStr + "年" + "&nbsp;&nbsp;" + shengXiaoStr + "年吉祥";   // 相关层显示结果
     }
     /* 计算天干 天干 = （某年份 - 3） % 10   （余数） */
     function calcTianGan()
     {
       var calc = (theYear - 3) % 10;
       switch (calc)
       {
         case 1:
           tianGanStr = "甲";
           break;
         case 2:
           tianGanStr = "乙";
           break;
         case 3:
           tianGanStr = "丙";
           break;
         case 4:
           tianGanStr = "丁";
           break;
         case 5:
           tianGanStr = "戊";



           break;
         case 6:
           tianGanStr = "己";
           break;
         case 7:
           tianGanStr = "庚";
           break;
         case 8:
           tianGanStr = "辛";
           break;
         case 9:
           tianGanStr = "壬";
           break;
         default:
           tianGanStr = "癸";
           break;
       }
     }
     /* 计算地支 地支 = （某年份 - 3） % 12，   （余数） 同步计算出生肖 */
     function calcDiZhi()
     {
       var calc = (theYear - 3) % 12;
       switch (calc)
       {
         case 1:
           diZhiStr = "子";
           shengXiaoStr = "鼠";
           break;
         case 2:
           diZhiStr = "丑";
           shengXiaoStr = "牛";
           break;
         case 3:
           diZhiStr = "寅";
           shengXiaoStr = "虎";
           break;
         case 4:
           diZhiStr = "卯";
           shengXiaoStr = "兔";
           break;
         case 5:
           diZhiStr = "辰";
           shengXiaoStr = "龙";
           break;
         case 6:



           diZhiStr = "巳";
           shengXiaoStr = "蛇";
           break;
         case 7:
           diZhiStr = "午";
           shengXiaoStr = "马";
           break;
         case 8:
           diZhiStr = "未";
           shengXiaoStr = "羊";
           break;
         case 9:
           diZhiStr = "申";
           shengXiaoStr = "猴";
           break;
         case 10:
           diZhiStr = "酉";
           shengXiaoStr = "鸡";
           break;
         case 11:
           diZhiStr = "戌";
           shengXiaoStr = "狗";
           break;
         default:
           diZhiStr = "亥";
           shengXiaoStr = "猪";
           break;
       }
     }
    
     /* 动态显示时间 */
     function timeRun()
     {
       var hourStr = "";   // 存储“时”的字符串
       var minuteStr = "";   // 存储“分”的字符串
       var secondStr = "";   // 存储“秒”的字符串
       var saying = "";   // 存储“不同时段问候语”的字符串
       theSecond++;
       if (theSecond == 60)   // “秒”逢60进一
       {
         theMinute++;
         theSecond = 0;
       }
       if (theMinute == 60)   // “分”逢60进一



       {
         theHour++;
         theMinute = 0;
       }
       if (theHour == 24)   // “小时”逢24进一
       {
         theHour = 0;
       }
       switch (theHour)   // 动态判断出“不同时段问候语”
       {
         case 0:
         case 1:
         case 2:
         case 3:
         case 4:
         case 5:
           saying = "凌晨好！你怎么不睡觉？";
           break;
         case 6:
         case 7:
           saying = "早晨好！该吃早餐了！";
           break;
         case 8:
         case 9:
         case 10:
           saying = "上午好！你要好好工作哦！";
           break;
         case 11:
         case 12:
         case 13:
           saying = "中午好！及时吃午餐，然后要午休一会儿哦！";
           break;
         case 14:
         case 15:
         case 16:
         case 17:
           saying = "下午好！这个时间有些疲惫，工作时千万不要打盹儿哦！";
           break;
         case 18:
         case 19:
           saying = "傍晚好！该吃晚餐了！";
           break;
         case 20:
         case 21:
           saying = "晚上好！要好好放松一下哦！";



           break;
         case 22:
         default:
           saying = "夜深了！要早点休息，明天还要工作呢！";
           break;
       }
       //hourStr = theHour < 10 ? "0" + theHour : theHour;
       if (theHour <= 12)
       {
         hourStr = theHour < 10 ? "0" + theHour : theHour;   // 凌晨、早晨、上午 “时”显示信息的字符串
       }
       else
       {
         hourStr = theHour - 12 < 10 ? "0" + (theHour - 12) : theHour - 12;     // 下午、傍晚、晚上 “时”显示信息的字符串
       }
       minuteStr = theMinute < 10 ? "0" + theMinute : theMinute;   // 全天 “分”显示信息的字符串
       secondStr = theSecond < 10 ? "0" + theSecond : theSecond;   // 全天 “秒”显示信息的字符串
       document.getElementById("clock").innerHTML = saying.substring(0,4) + "现在是" + hourStr + ":" + minuteStr + ":" + secondStr;   // 本层显示的信息
       document.title = "万年历   " + saying;   // 网页标题的动态变化
       var theTime = setTimeout("timeRun()",1000);   // setTimeout() 每秒都循环一次
     }
     /* 计算选中的年份之前的天数 */
     function calcBeforeTheYearTotalDays()
     {
       for (var i = 1900; i < theYear; i++)
       {
         if ((i % 4 == 0 && i % 100 != 0) || (i % 400 == 0))   // 闰年366天
         {
           totalDays = totalDays + 366;   // 某个月第一天距离1900.1.1的总天数渐渐累加
         }
         else   // 平年365天
         {
           totalDays = totalDays + 365;   // 某个月第一天距离1900.1.1的总天数渐渐累加
         }
       }
     }
     /* 计算选中的月份之前的天数 */
     function calcBeforeTheMonthTotalDays()



     {
       for (var i = 1; i < theMonth; i++)
       {
         switch(i)
         {
           case 1:
           case 3:
           case 5:
           case 7:
           case 8:
           case 10:
           case 12:
             totalDays = totalDays + 31;   // 一三五七八十腊 31天 某个月第一天距离1900.1.1的总天数渐渐累加
             break;
           case 4:
           case 6:
           case 9:
           case 11:
             totalDays = totalDays + 30;   // 某个月第一天距离1900.1.1的总天数渐渐累加
             break;
           default:
             if ((theYear % 4 == 0 && theYear % 100 != 0) || (theYear % 400 == 0))
             {
               totalDays = totalDays + 29;   // 2月：闰年 29天 某个月第一天距离1900.1.1的总天数渐渐累加
             }
             else
             {
               totalDays = totalDays + 28;   // 2月：平年 28天 某个月第一天距离1900.1.1的总天数渐渐累加
             }
             break;
         }
       }
     }
     /* 计算选中的这个月的第一天是星期几 */
     function judgeWeekDay()
     {
       var calcResult = totalDays % 7 + 1;   // 核心计算方法，计算某个月的第一天是星期几
       firstDayOfTheMonth = calcResult == 7 ? 0 : calcResult;   // 7 变为 0



     }
     /* 输出日历 */
     function printCalendar()
     {
       calcBeforeTheYearTotalDays();   // 1900年 ～ （当前年 - 1）   每年的总天数
       calcBeforeTheMonthTotalDays();   // 当前年份，本月前的所有月份总天数
       judgeWeekDay();   // 判断某个月的第一天是星期几
       clearCalendar();   // 清空日历
       rowNum = (days + firstDayOfTheMonth) % 7 == 0 ? (days + firstDayOfTheMonth) / 7 : parseInt((days + firstDayOfTheMonth) / 7) + 1;   // 判断打印某个月的日历需要几行
       for (var i = 1; i <= rowNum; i++)
       {
         var newRow = document.getElementById("dateTable").insertRow();   // 添加表格的行，正着添加
         for (var j = 1; j <= 7; j++)
         {
           var newCell = newRow.insertCell();   // 每一行动态添加表格 cell
           newCell.id = "td" + parseInt(j + 7 * (i - 1));   // 给每个表格设置id
           if (i == 1)   // 如果是打印日历的第一行，需要判断一下本月的第一天是星期几
           {
             if (j - 1 < firstDayOfTheMonth)
             {
               newCell.innerHTML = "&nbsp;&nbsp;";   // 空格、缩进处理
             }
             else
             {
               newCell.innerHTML = dateIndex < 10 ? "&nbsp;" + dateIndex : dateIndex;   // 右对齐、美观处理
               dateIndex++;   // 有效的索引index自增（同步某个月的日）  
             }
           }
           else
           {
             if (dateIndex <= days)
             {



扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
分享到: