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阻止冒泡事件使用模拟事件
Sep 06 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python实现批量修改文件名
2020/03/23 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
参观监狱心得体会
2014/01/02 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers