- 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"><</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 //
