编程 Javascript

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

Posted in Javascript onDecember 28, 2016

本文实例讲述了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.3water.com/bianmin/wannianli

网页万年历日历：
http://tools.3water.com/bianmin/webwannianli

在线万年历黄历flash版：
http://tools.3water.com/bianmin/flashwnl

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

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

- Author -

xlei1123

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Web版彷 Visual Studio 2003 颜色选择器

Jan 09 Javascript

JavaScript 对象、函数和继承

Jul 07 Javascript

IE 下的只读 innerHTML

Aug 21 Javascript

关于jquery性能最佳实践的讨论,与求教

Mar 30 Javascript

js实现div的切换特效上一个下一个

Feb 11 Javascript

微信公众号摇一摇周边功能开发

Dec 08 Javascript

Angular2学习教程之ng中变更检测问题详解

May 28 Javascript

详解Vue Elememt-UI构建管理后台

Feb 27 Javascript

json对象及数组键值的深度大小写转换问题详解

Mar 30 Javascript

小程序识别身份证，银行卡，营业执照，驾照的实现

Nov 05 Javascript

antd table按表格里的日期去排序操作

Nov 17 Javascript

vue实现可以快进后退的跑马灯组件

Apr 08 Vue.js

如何学JavaScript？前辈的经验之谈

Dec 28 #Javascript

js+div+css下拉导航菜单完整代码分享

Dec 28 #Javascript

javascript实现简单的ajax封装示例

Dec 28 #Javascript

前端面试知识点锦集（JavaScript篇）

Dec 28 #Javascript

一句jQuery代码实现返回顶部效果（简单实用）

Dec 28 #Javascript

Web前端框架bootstrap实战【第一次接触使用】

Dec 28 #Javascript

hovertree插件实现二级树形菜单（简单实用）

Dec 28 #Javascript