[Html css js] to achieve a simple calendar

- Effects of the preview]

To achieve the most basic function of the calendar, the current date is displayed in red, you can view the date on or next month or so through the button above.

 

- Code [section]

1. HTML

 1 <body>
 2    <div class="cldBody">
 3        <table>
 4           <thead>
 5                <tr>
 6                    <td colspan="7">
 7                        <div class="top">
 8                            <span id="left">&lt;</span>
 9                            <span id="topDate"></span>
10                            <span id="right">></span>
11                        </div>
12                    </td>
13                </tr>
14                <tr id="week" >
15                    <td></td>
16                    <td></td>
17                    <td></td>
18                    <td>td</Three>
19                    <td></td>
20                    <td></td>
21                    <td></td>
22                </tr>
23            </thead>
24            <tbody id="tbody" ></tbody>
25        </table>
26   </div>
27</body>

 

2. CSS

 1 <style type="text/css">
 2       .cldBody{background:#f7f7f7;width: 420px;margin: 10px auto;}
 3       .cldBody .top{height: 60px;line-height: 60px;text-align: center;position: relative;}
 4       #topDate{font-size: 24px;}
 5       #week td{font-size: 15px;}
 6       td{width: 60px; height: 60px;line-height: 60px;text-align: center;font-size: 20px;}
 7       #tbody td:hover{background: #ededed;cursor: pointer;}
 8       .curDate{color: red;font-weight: bold;}
 9       #left,#right{width: 60px;height: 60px;position: absolute;cursor: pointer;}
10       #left{left: 0;}
11       #right{right: 0;}
12       #left:hover, #right:hover{background-color: rgba(30, 30, 30, 0.2);}
13   </style>

 

[Rendering]:

 

3.JS part of [the bloggers quoted jq framework]

- 1. introduced jq

1  <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

- 2. Adding month to top

1 var date = new Date();
2 var year = date.getFullYear();
3 var nowyear = date.getFullYear();
4 var month = date.getMonth()+1;
5 var nowmonth = date.getMonth()+1;
6 var dateday = date.getDate();
7 var todateHtml = year + '年'+ month + '月';
8 $('#topDate').text(todateHtml)

- 3. Add the calendar function

. 1  function showcld () {        
 2    var MonthDay = [31,28,31,30,31,30,31,31,30,31,30,31];   // create a storage array how many days each month, the default 2 May 28 days
 3    // Analyzing leap year
 . 4    IF {(year. 4 == 0 && year% 100% 400% = 0 == 0 || year!)
 . 5        MonthDay [. 1] = 29;
 . 6    }
 . 7    // calculated for each days months
 . 8    var = days MonthDay [-month the. 1];   
 . 9    // Analyzing the week is the first day of each month
 10    date.setYear (year);         // a year
 . 11    Date.setMonth (-month the. 1);    / / month of a certain year
 12 is    Date.setDate (. 1);    // day of the month
 13 is    var = date.getDay WEEKDAY ();   // day of the week is determined
14    space before One padded //
 15    var tbodyHtml = ' < TR > ';
 16    for (var I = 0; I <WEEKDAY; I ++) {
 . 17        tbodyHtml + = "<TD> </ TD>";
 18 is    }
 19    // filled day of the month
 20 is    var changLine = WEEKDAY;
 21 is   var tagclass = '';
 22 is   for (I =. 1; I <= Days; I ++) { // for each date of filling
 23 is        IF (year = && == nowmonth month The nowyear = && DAY, DATE == I) {
 24                 tagclass = "CurDate";// current date corresponds to a grid
 25                  } {the else
 26 is                      tagclass = "isDate";
 27                 }
 28        tbodyHtml + = "<TD class =" + + tagclass ">" + I + "</ TD>";
 29        changLine = (+ changLine. 1). 7%;
 30        ! IF (I = changLine == 0 && Days ) { // determines whether the wrap-filled
 31 is            tbodyHtml + = " </ TR > < TR > ";
 32        } 
 33 is      }
 34 is    $ ( '# tbody') empty ();.    // clear the original content
 35    $ ( '#tbody') the append (tbodyHtml);.   // add the date of the content of the current month
 36 }

 - 4. Click the Add button events

1  // Set button click event
 2  $ ( '# left') the Click (function () {.
 . 3      month The month The-1 =;
 . 4      IF (month The <1) {
 . 5              month The = 12 is;
 . 6              year--;
 . 7      }
 . 8      var todateHtml = year + 'of' + month + 'month';
 . 9      $ ( '# topDate') text (todateHtml);.
 10      showcld ();
 . 11  });
 12 is          
13 is  . $ ( '# right') the Click ( function () {
 14      month The month The + =. 1;
 15     IF (month The> 12 is) {
 16              month The =. 1;
 . 17              year ++;
 18 is      }
 . 19     var todateHtml = year + 'of' + month + 'month';
 20 is      $ ( '# topDate') text (todateHtml);.
 21 is      showcld ();
 22 is  })    
 23 is   ; showcld ()   function is executed after loading the page //
  • Add to phrasebook
     
    copy
    • Without this set of words: -> Chinese (simplified) ...
       
    • Create a new set of words ...

Guess you like

Origin www.cnblogs.com/lamian77/p/11872008.html