欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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程序设计有所帮助。