JS简单实现移动端日历功能示例
程序员文章站
2022-11-02 20:10:10
本文实例讲述了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:这里再为大家分享几款本站的在线日期工具供大家参考:
在线万年历日历:
网页万年历日历:
在线万年历黄历flash版:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript时间与日期操作技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: Linux根目录下主要目录功能说明