本文實(shí)例講述了JS簡單實(shí)現(xiàn)移動(dòng)端日歷功能。分享給大家供大家參考，具體如下：
只是一個(gè)初步的簡單的日歷，有是否顯示上月和下月部分的選項(xiàng)
<!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>移動(dòng)端日歷</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.VeVB.COm/bianmin/wannianli
網(wǎng)頁萬年歷日歷：
http://tools.VeVB.COm/bianmin/webwannianli
在線萬年歷黃歷flash版：
http://tools.VeVB.COm/bianmin/flashwnl
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時(shí)間與日期操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
