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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
js常用代码段整理
Nov 30 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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批量删除数据
2007/01/18 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
JS中eval函数的使用示例
2013/07/21 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
JS实现碰撞检测的方法分析
2018/01/19 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
python连接oracle数据库实例
2014/10/17 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
如何将python中的List转化成dictionary
2016/08/15 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
How TDD works
2012/09/30 面试题
学生实习推荐信范文
2013/11/26 职场文书
工程建设实施方案
2014/03/14 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
中层干部考核评语
2015/01/04 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript