JS简单实现移动端日历功能示例

2019-11-19 18:13:06

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/bianmin/wannianli

网页万年历日历：
http://tools.VeVB.COm/bianmin/webwannianli

在线万年历黄历flash版：
http://tools.VeVB.COm/bianmin/flashwnl

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：BootStrap Table 设置height表头与内容无法对齐的问题

下一篇：如何学JavaScript？前辈的经验之谈