首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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
openEuler(1) Spring Bean(1) Spring JPA(1) Tsmoothie(1) Switch(1) Selenium(1) EditText(1) filter(1) Django(9) TextInputLayout(1)
You might like
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
详解php实现页面静态化原理
2017/06/21 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用（七）
2017/06/04 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
用Python shell简化开发
2018/08/08 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
在django模板中实现超链接配置
2019/08/21 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
如何通过python计算圆周率PI
2020/11/11 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
主题团日活动总结
2014/06/25 职场文书
出售房屋协议书范本
2014/10/06 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
电话营销开场白
2015/05/29 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
创业不要错过，这4种餐饮新模式
2019/07/18 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL