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

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
You might like
常用的php对象类型判断
2008/08/27 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php类常量的使用详解
2013/06/08 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python实现银行实战系统
2020/02/26 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python实现画图工具
2020/08/27 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Servlet方面面试题
2016/09/28 面试题
文秘求职信范文
2014/04/10 职场文书
房地产推广策划方案
2014/05/19 职场文书
土建施工员岗位职责
2014/07/16 职场文书
关于诚信的活动方案
2014/08/18 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
详解如何用Python实现感知器算法
2021/06/18 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
mysql的单列多值存储实例详解
2022/04/05 MySQL