本文实例讲述了JS简单实现移动端日历功能。分享给大家供大家参考,具体如下:
只是一个初步的简单的日历,有是否显示上月和下月部分的选项
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name = "format-detection" content = "telephone=no"> <title>移动端日历</title> <style type="text/css"> table{ width: 100%; border-collapse: collapse; } td { padding: 0; margin: 0; vertical-align: middle; text-align: center; font-size: .7rem; height: 1.5rem; } .none{ display: none; } </style> </head> <body> <div class="calendar"> <table class="calendar_day"> <tr> <td>星期日</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> </tr> </table> <table class="calendar_date"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> <script type="text/javascript"> var date = new Date(); calendar(date,{lastandnext:true}) function calendar (setDate,options){ if (!options) { options = {}; } options.lastandnext = options.lastandnext || false; // 星期几部分 var calendar_days = document.getElementsByClassName('calendar_day')[0]; var days = calendar_days.getElementsByTagName('td'); var date = new Date(setDate); var y = date.getFullYear(); var m = date.getMonth(); var d = date.getDate(); // 本月 // 该月的第一天是星期几 var firstDay = new Date(y,m,1).getDay(); // console.log(firstDay); // 该月一共多少天 var lastData = new Date(y,m+1,0).getDate(); // console.log(lastData) // 该月的最后一天是星期几 var lastDay = new Date(y,m+1,0).getDay(); // console.log(firstDay) var calendar_date = document.getElementsByClassName('calendar_date')[0]; var tds = calendar_date.getElementsByTagName('td'); // console.log(tds) var ed = firstDay; for (var i = firstDay; i < lastData+firstDay; i++) { // console.log(i-firstDay+1) tds[i].innerHTML= i-(firstDay)+1; } if(options.lastandnext){ // // 上月 var lastMonthData = new Date(y,m,0).getDate(); for(var i = firstDay-1; i >= 0; i--){ tds[i].innerHTML= lastMonthData-(firstDay-i-1); } // 下月 var k = 0; for(var i = lastData+firstDay; i < tds.length; i++){ k++; tds[i].innerHTML= k; } } } </script> <!-- 适配 --> <script type="text/javascript"> ;(function(win, doc){ function change(){ doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/360+'px'; } change(); win.addEventListener('resize', change, false); })(window, document); </script> </body> </html>
PS:这里再为大家分享几款本站的在线日期工具供大家参考:
在线万年历日历:
http://tools.kunjuke.com/bianmin/wannianli
网页万年历日历:
http://tools.kunjuke.com/bianmin/webwannianli
在线万年历黄历flash版:
http://tools.kunjuke.com/bianmin/flashwnl
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- js Canvas实现的日历时钟案例分享
- js css+html实现简单的日历
- JavaScript制作简单的日历效果
- javascript实现的淘宝旅行通用日历组件用法实例
- javascript实现带节日和农历的日历特效
- 修改js Calendar日历控件 兼容IE9/谷歌/火狐
- javascript实现日历控件(年月日关闭按钮)
- javascript实现的简易的DatePicker日历
- javascript写的日历类(基于pj)
- 简单JavaScript日历及详细说明
- JS学习之一个简易的日历控件