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

2024-05-06 15:03:56

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

上一篇：JS实现搜索框文字可删除功能

下一篇：获取当前月（季度/年）的最后一天（set相关操作及应用）