您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

分享一个日历的实现方法

2026/1/6 22:10:44发布19次查看
新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑
<!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 以上就是分享一个日历的实现方法的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product