カレンダーの実装方法を共有する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

カレンダーの実装方法を共有する

零下一度

Jun 27, 2017 am 09:37 AM

html 製造方法カレンダー単純

私は初心者で、高度なブログ投稿の書き方がわかりません。恥ずかしさを見せるためにいつもやっている小さな練習だけです

  <!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>

ログイン後にコピー

以上がカレンダーの実装方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。