| 【html css js】实现一个简易日历 | 您所在的位置：网站首页 › 怎么做天气日历表最好看 › 【html css js】实现一个简易日历 |
【html css js】实现一个简易日历
|
——【效果预览】
实现了日历最基础的功能，当前日期红色显示，可通过上方的左右按钮查看上一月或下一月的日期。
——【代码部分】 1. HTML 1 2 3 4 5 6 7 8 ; 9 10 ; 11 12 13 14 15 日 16 一 17 二 18 三 19 四 20 五 21 六 22 23 24 25 26 27
2. CSS 1 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
【效果图】：
3.JS部分【博主引用了jq框架】 ——1. 引入jq 1——2. 添加月份到顶部 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. 添加日历函数 1 function showcld(){ 2 var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31]; // 创建数组存放每个月有多少天 ,默认2月为28天 3 // 判断闰年 4 if(year % 4 == 0 && year %100 != 0 || year % 400 == 0){ 5 monthDay[1] = 29; 6 } 7 // 计算每个月的天数 8 var days = monthDay[month-1]; 9 // 判断每月第一天为周几 10 date.setYear(year); //某年 11 date.setMonth(month-1); //某年的某月 12 date.setDate(1); // 某月的某天 13 var weekday = date.getDay(); // 判断某天是周几 14 // 补齐一号前的空格 15 var tbodyHtml = ''; 16 for(var i = 0; i 12){ 16 month = 1; 17 year++; 18 } 19 var todateHtml = year + '年'+ month + '月'; 20 $('#topDate').text(todateHtml); 21 showcld(); 22 }) 23 showcld(); //页面加载后执行函数
|
【本文地址】
公司简介
联系我们