js+html制作简单日历的方法

2019-11-19 16:14:15

字体：大中小

来源：转载

供稿：网友

新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑

代码：

<!doctype html><html> <head>  <meta charset="utf-8">  <title>无标题文档</title>  <style>   * {margin: 0;padding: 0}   #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}   #calendar h4 {text-align: center;margin-bottom: 10px}   #calendar .a1 {position: absolute;top: 20px;left: 20px;}   #calendar .a2 {position: absolute;top: 20px;right: 20px;}   #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}   #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}   #calendar .dateList {overflow: hidden;clear: both}   #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}   #calendar .dateList .ccc {color: #ccc;}   #calendar .dateList .red {background: #F90;color: #fff;}   #calendar .dateList .sun {color: #f00;}  </style>  <script src="js/jquery-1.11.3.min.js"></script>  <script>   $(function() {    //必要的数据    //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？    var iNow=0;        function run(n) {     var oDate = new Date(); //定义时间     oDate.setMonth(oDate.getMonth()+n);//设置月份     var year = oDate.getFullYear(); //年     var month = oDate.getMonth(); //月     var today = oDate.getDate(); //日     //计算本月有多少天     var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];     //判断闰年     if(month == 1) {      if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {       allDay = 29;      }     }     //判断本月第一天是星期几     oDate.setDate(1); //时间调整到本月第一天     var week = oDate.getDay(); //读取本月第一天是星期几     //console.log(week);     $(".dateList").empty();//每次清空     //插入空白     for(var i = 0; i < week; i++) {      $(".dateList").append("<li></li>");     }     //日期插入到dateList     for(var i = 1; i <= allDay; i++) {      $(".dateList").append("<li>" + i + "</li>")     }     //标记颜色=====================     $(".dateList li").each(function(i, elm){      //console.log(index,elm);      var val = $(this).text();      //console.log(val);      if (n==0) {       if(val<today){       $(this).addClass('ccc')      }else if(val==today){       $(this).addClass('red')      }else if(i%7==0 || i%7==6 ){       $(this).addClass('sun')      }      }else if(n<0){       $(this).addClass('ccc')      }else if(i%7==0 || i%7==6 ){       $(this).addClass('sun')      }     });     //定义标题日期     $("#calendar h4").text(year + "年" + (month + 1) + "月");    };    run(0);        $(".a1").click(function(){     iNow--;     run(iNow);    });        $(".a2").click(function(){     iNow++;     run(iNow);    })   });  </script> </head> <body>  <div id="calendar">   <h4>2013年10月</h4>   <a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>   <a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>   <ul class="week">    <li>日</li>    <li>一</li>    <li>二</li>    <li>三</li>    <li>四</li>    <li>五</li>    <li>六</li>   </ul>   <ul class="dateList"></ul>  </div> </body></html>

更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS中把函数作为另一函数的参数传递方法(总结)

下一篇：ionic环境配置及问题详解