zoukankan      html  css  js  c++  java
  • 使用JavaScript编写日历的程序代码

    昨天,我接到的公司老司机的命令,要求我完成一个万年历,目的是想通过日历来利用ajax显示报名信息。平时不怎么重视日历的我遇到了很多麻烦,幸好在公司的一台机器上找到了问题解决的思路。虽然不知道这位sir是谁,但是我还是要感谢他,他的思路让我明白了什么是闰年,什么是小月大月,跳转月份的规则...总之,如果你看到了的话烦请您联系我一声,我会摆平所有的阻碍为你献上一卷卫生纸表达感激!

    接下来就是万年历小程序的内容(使用js编写):

    1:HTML层

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title>日历</title>
     6     <link rel="stylesheet" type="text/css" href="Calendar.css">
     7     <script type="text/javascript" src="Calendar.js"></script>
     8 </head>
     9 <body>
    10     <div id="calendar" class="calendar">
    11         <div class="prev">
    12             <button id="prev_M">上个月</button>
    13         </div>
    14 
    15         <span id="month"></span><span id="year"></span>16 
    17         <div class="next">
    18             <button id="next_M">下个月</button>
    19         </div>
    20     </div>
    21 
    22     <div style="clear:both"></div>
    23     <!--日历主体-->
    24     <div id="calendar_weektitle"></div>
    25     <div id="calendar_weekday"></div>
    26     <div style="clear:both;"></div>
    27     <!--报名信息-->
    28     <div id="regis"><span id="reg_i" style="color:green;"></span> 是否可报名</div>
    29     <div id="instalment">月份/批次</div>
    30 </body>
    31 </html>

    2:CSS ceng

     1 .calendar{
     2     font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
     3     width: 490px;
     4     text-align: center;
     5     overflow: hidden;
     6 }
     7 #calendar_weekday{
     8     width: 500px;
     9 }
    10 #calendar_weektitle{
    11     width: 500px;
    12 }
    13 .prev{
    14     cursor: pointer;
    15     float: left;
    16     /*            padding-right: px;*/
    17 }
    18 .next{
    19     cursor: pointer;
    20     float: right;
    21     /*            padding-right: px;*/
    22 }
    23 
    24 #calendar_weekday div,#calendar_weektitle div{
    25     border-bottom: 1px solid #cccccc;
    26     font-size: 11px;
    27     font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    28 }
    29 #calendar_weekday div{
    30     color: #adadad;
    31 }
    32 #calendar_weekday > div:hover{
    33     background-color: #ffcd3c;
    34     opacity: .5;
    35 }
    36 #regis,#instalment{
    37     line-height: 35px;
    38     font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    39     font-size: 14px;
    40     width: 490px;
    41     padding-left: 20px;
    42 }
    43 #regis{
    44     background-color: #ffd96a;
    45     height: 40px;
    46 }
    47 #instalment{
    48     border-bottom: 1px solid red;
    49     /*line-height: 30px;*/
    50     height: 36px;
    51 }

    3:javascript ceng !important

      1 /**
      2  * Created by heart on 2017/4/26.
      3  */
      4 window.onload = function(){
      5     //为日历写入月份头部
      6     function Calendar(){
      7         var weeks = ['日', '一', '二', '三', '四', '五', '六'];
      8         for(i = 0; i < weeks.length; i++){
      9             var div = document.createElement('div');
     10             div.id = 'week_' + i;
     11             div.innerHTML = weeks[i];
     12             div.style.width = '14%';
     13             div.style.height = '35px';
     14             div.style.lineHeight = div.style.height;
     15             div.style.backgroundColor = '#ccc';
     16             div.style.float = 'left';
     17             div.style.textAlign = 'center';
     18             document.getElementById('calendar_weektitle').appendChild(div);
     19         }
     20         alert("1");
     21     }
     22 
     23     //构造原型对象
     24     Calendar.prototype = {
     25         //取闰年函数
     26         isLeap : function(year){
     27             return (year % 100 !== 0 && year % 4 == 0) || (year % 400 == 0);
     28         },
     29         //返回本年本月的天数
     30         getDaysNum : function(year, month) {
     31             var num = 31;           //大月
     32             switch (month) {
     33                 case '2':
     34                     num = this.isLeap(year) ? 29 : 28;
     35                     break;         //小月
     36                 case 4:
     37                 case 6:
     38                 case 9:
     39                 case 11:
     40                     num = 30;
     41                     break;
     42             }
     43             return num;
     44         },
     45         //返回本月的第一天是周几
     46         getWeek : function(year, month){
     47             var d = new Date();
     48             // var m=d.getMonth()+1;
     49             // var y=d.getYear();
     50 
     51             d.setYear(year);
     52             d.setMonth(month-1);
     53             d.setDate(1);
     54             var weeks = ['7', '1', '2', '3', '4', '5', '6'];
     55             return weeks[d.getDay()];
     56 
     57         },
     58         //核心函数,写入日历
     59         show : function(year, month){
     60             var weekFirstDay = this.getWeek(year, month);
     61             var dayCount = this.getDaysNum(year, month);
     62             console.log(weekFirstDay);
     63             //得到本月头是周几,并在前面插入空天数
     64             if(weekFirstDay != '7'){
     65                 for(var i = 0; i < weekFirstDay; i++){
     66                     var div_1 = document.createElement('div');
     67                     div_1.style.cursor = 'pointer';
     68                     div_1.innerHTML = '';
     69                     div_1.style.width = '14%';
     70                     div_1.style.height = '40px';
     71 //                    div_1.style.lineHeight = div_1.style.height / 2;
     72                     div_1.style.float = 'left';
     73                     div_1.style.textAlign = 'center';
     74                     document.getElementById('calendar_weekday').appendChild(div_1);
     75                 }
     76             }
     77             //得到本月的天数,按规则格式注入天数
     78             for(i = 0; i < dayCount; i++){
     79                 var div_2 = document.createElement('div');
     80                 div_2.style.cursor = 'pointer';
     81                 div_2.id = 'day_' + year + '_' + month + '_' + (i + 1);
     82                 console.log(div_2.id);
     83                 div_2.innerHTML = i + 1 + '<br />';
     84                 div_2.style.width = '14%';
     85                 div_2.style.height = '40px';
     86 //                div_2.style.lineHeight = div_2.style.height / 2;
     87                 div_2.style.float = 'left';
     88                 div_2.style.textAlign = 'center';
     89                 document.getElementById('calendar_weekday').appendChild(div_2);
     90             }
     91 
     92         },
     93         //跳转上个月,月份减一
     94         PreMonth: function() {
     95             this.PreDraw(new Date(this.Year, this.Month - 2, 1));
     96         },
     97         //跳转下个月,月份加一
     98         NextMonth: function() {
     99             this.PreDraw(new Date(this.Year, this.Month, 1));
    100         },
    101         //重绘
    102         PreDraw: function(date) {
    103             this.Year = date.getFullYear();
    104             this.Month = date.getMonth() + 1;
    105             this.Draw();
    106         }
    107     };
    108     alert('2');
    109     //对象实例化
    110     Calen = new Calendar();
    111     //获取本地时间
    112     var  data= new Date();
    113     m = data.getMonth()+1;
    114     y =data.getFullYear();
    115     d = data.getDate();
    116     //写入本月天数
    117     Calen.show(y,m);
    118     var today = document.getElementById('day_'+ y + '_'+ m + '_' + d);
    119     today.style.backgroundColor = '#ffcd3c';
    120 
    121     document.getElementById("year").innerHTML = y;
    122     document.getElementById("month").innerHTML = m;
    123     alert('3');
    124     //跳转到下个月
    125     document.getElementById("next_M").onclick = function(){
    126         var  div=document.getElementById("calendar_weekday");
    127         div.innerHTML = "";
    128         if(m > 0&&m < 12){
    129             m += 1;
    130         }else if(m > 1){
    131             m = 1;
    132             y += 1;
    133         }else if(m == 12){
    134             m = 1;
    135             y += 1;
    136         }
    137         Calen.show(y, m);
    138         document.getElementById("year").innerHTML = y;
    139         document.getElementById("month").innerHTML = m;
    140     };
    141 
    142     //跳转到上一月
    143     document.getElementById("prev_M").onclick = function(){
    144         var div = document.getElementById("calendar_weekday");
    145         div.innerHTML="";
    146         if(m > 1 && m < 12){
    147             m -= 1;
    148         }else if(m <= 1){
    149             m = 12;
    150             y-=1;
    151         }else if(m == 12){
    152             m -= 1;
    153         }
    154         Calen.show(y, m);
    155         document.getElementById("year").innerHTML = y;
    156         document.getElementById("month").innerHTML = m;
    157     };
    158 };

     对于js程序,我使用的是javascript原型对象开发模式,个人觉得在较复杂的程序中它相对函数式模式更加可视直观。相关的细节描述已在代码的注释中标识;可能在动态样式上有所不足;可能需要在功能上有所补充;代码可取走分析使用。

  • 相关阅读:
    网络编程之粘包问题
    网络编程初识和socket套接字
    面向对象三大特性
    面向对象进阶
    面向对象初接触
    常用模块(模块初步了解)
    异常处理
    Ubutu Chrome 出现adobe flash is out of date的解决方法
    cmder默认的命令提示符λ改成$
    css在盒子中垂直居中和固定居中
  • 原文地址:https://www.cnblogs.com/xuanya/p/6773777.html
Copyright © 2011-2022 走看看