JS,移动端,日历功能本文实例讲述了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.wanshiok.com/bianmin/wannianli 网页万年历日历：
http://tools.wanshiok.com/bianmin/webwannianli 在线万年历黄历flash版：
http://tools.wanshiok.com/bianmin/flashwnl 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》 希望本文所述对大家JavaScript程序设计有所帮助。
JS,移动端,日历功能
|
