Share how to implement a calendar-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Share how to implement a calendar

零下一度

Jun 27, 2017 am 09:37 AM

html Production Method calendar Simple

I am a newbie, I don’t know how to write any high-level blog posts, some small exercises that I usually do, show my shame

  <!doctype html>   
  <html>    
  <head>         
  <meta charset="utf-8">  6         
  <title>无标题文档</title>  7         
  <style>  8             
  * {margin: 0;padding: 0}  9             
  #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative} 10 
  #calendar h4 {text-align: center;margin-bottom: 10px} 11             
  #calendar .a1 {position: absolute;top: 20px;left: 20px;} 12             
  #calendar .a2 {position: absolute;top: 20px;right: 20px;} 13             
  #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px} 14             #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;} 15             #calendar .dateList {overflow: hidden;clear: both} 16             #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;} 17             
  #calendar .dateList .ccc {color: #ccc;} 18             #calendar .dateList .red {background: #F90;color: #fff;} 19             #calendar .dateList .sun {color: #f00;} 20         </style> 21         <script src="js/jquery-1.11.3.min.js?1.1.11"></script> 22         <script> 23             $(function() { 24  25                 //必要的数据 26                 
  //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？ 27                 var iNow=0; 28                  29                 function run(n) { 30  31                     var oDate = new Date(); //定义时间 32                     oDate.setMonth(oDate.getMonth()+n);//设置月份 33                     var year = oDate.getFullYear(); //年 34                     
  var month = oDate.getMonth(); //月 35                     var today = oDate.getDate(); //日 36  37                     //计算本月有多少天 38                     var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; 39  40                     //判断闰年 41                     if(month == 1) { 42                         
  if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { 43                             allDay = 29; 44                         } 45                     } 46  47                     //判断本月第一天是星期几 48                     oDate.setDate(1); //时间调整到本月第一天 49                     
  var week = oDate.getDay(); //读取本月第一天是星期几 50  51                     //console.log(week); 52                   $(".dateList").empty();//每次清空 53                     //插入空白 54  55                     for(var i = 0; i < week; i++) { 56                         $(".dateList").append("<li></li>"); 57                     } 58  59                     
  //日期插入到dateList 60                     for(var i = 1; i <= allDay; i++) { 61                         $(".dateList").append("<li>" + i + "</li>") 62                     } 63                     //标记颜色===================== 64                     $(".dateList li").each(function(i, elm){ 65                         
  //console.log(index,elm); 66                         
  var val = $(this).text(); 67                         //console.log(val); 68                         if (n==0) { 69                             
  if(val<today){ 70                             $(this).addClass('ccc') 71                         }else if(val==today){ 72                             
  $(this).addClass('red') 73                         
  }else if(i%7==0  ||  i%7==6   ){ 74                             $(this).addClass('sun') 75                         } 76                         }else if(n<0){ 77                             
  $(this).addClass('ccc') 78                         }else if(i%7==0  ||  i%7==6   ){ 79                             
  $(this).addClass('sun') 80                         
  } 81                     
  }); 82  83                     
  //定义标题日期 84                     
  $("#calendar h4").text(year + "年" + (month + 1) + "月"); 85                 }; 86                 run(0); 87                                 
  $(".a1").click(function(){ 89                     iNow--; 90                     run(iNow); 91                 });                  
  $(".a2").click(function(){ 94                     
  iNow++; 95                     
  run(iNow); 96                 
  }) 97             }); 98         
  </script> 99     
  </head>100 101     <body>102         
  <div id="calendar">103             
  <h4>2013年10月</h4>104             
  <a href="##" class="a1">上月</a>105             
  <a href="##" class="a2">下月</a>106             
  <ul class="week">107                 
  <li>日</li>108                 
  <li>一</li>109                 
  <li>二</li>110                 
  <li>三</li>111                 
  <li>四</li>112                 
  <li>五</li>113                 
  <li>六</li>114 115             
  </ul>116             
  <ul class="dateList"></ul>117         
  </div>118 119     </body>120 121 </html>

Copy after login

The above is the detailed content of Share how to implement a calendar. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn