Posted in Javascript onDecember 28, 2016
本文实例讲述了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.3water.com/bianmin/wannianli
网页万年历日历:
http://tools.3water.com/bianmin/webwannianli
在线万年历黄历flash版:
http://tools.3water.com/bianmin/flashwnl
希望本文所述对大家JavaScript程序设计有所帮助。
JS简单实现移动端日历功能示例
- Author -
xlei1123声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@