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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
如何学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递归函数中使用return的注意事项
2014/01/17 PHP
php生成验证码函数
2015/10/20 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python使用Tesseract库识别验证
2018/03/21 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
python 变量初始化空列表的例子
2019/11/28 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Python接收手机短信的代码整理
2020/08/02 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
质量标语大全
2014/06/12 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
高中社区服务活动报告
2015/02/05 职场文书
后勤工作个人总结
2015/02/28 职场文书
内勤岗位职责范本
2015/04/13 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers