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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP自动更新新闻DIY
2006/10/09 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Vue中引入样式文件的方法
2017/08/18 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
python中lambda()的用法
2017/11/16 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
前台文员职责范本
2014/03/07 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
趵突泉导游词
2015/02/03 职场文书
热血教师观后感
2015/06/10 职场文书
农村老人去世追悼词
2015/06/23 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
一文搞懂Java中的注解和反射
2022/06/21 Java/Android