JavaScript实现简易的天数计算器实例【附demo源码下载】


Posted in Javascript onJanuary 18, 2017

本文实例讲述了JavaScript实现简易的天数计算器。分享给大家供大家参考,具体如下:

运行效果图如下:

JavaScript实现简易的天数计算器实例【附demo源码下载】

功能:

1. 支持选择日期;
2. 自动计算闰年;
3. 支持使用当前日期。

代码:

(1)html文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易天数计算器</title>
  <script type="text/javascript" src="dayCounter.js"></script>
</head>
<body onload="initView(['year', 'month', 'day']); initView(['year2', 'month2', 'day2'])">
<form>
  开始日期
  <select id="year" onchange="update(1)">
  </select>
  年
  <select id="month" onchange="update(1)">
  </select>
  月
  <select id="day">
  </select>
  日
  <input type="checkbox" id="startCb" onclick="useTodayAsStart()">使用当前日期
  <br/>
  结束日期
  <select id="year2" onchange="update(2)">
  </select>
  年
  <select id="month2" onchange="update(2)">
  </select>
  月
  <select id="day2">
  </select>
  日
  <input type="checkbox" id="endCb" onclick="useTodayAsEnd()">使用当前日期
  <br/>
  <br/>
</form>
<button onclick="calDays('dayCountText')">计算天数</button>
<p id="dayCountText" style="margin-left: 10px;"></p>
<script type="text/javascript">
  /**
   * 根据年和月更新日列表.
   * @param flag 1-开始日期 2-结束日期
   */
  function update(flag) {
    if (flag == 1) {
      updateDaySelect(['year', 'month', 'day']);
    } else {
      updateDaySelect(['year2', 'month2', 'day2']);
    }
  }
  //计算天数
  function calDays(id) {
    var s = getDateStr(['year', 'month', 'day']);
    var e = getDateStr(['year2', 'month2', 'day2']);
    document.getElementById(id).innerHTML = calDayCount(s, e);
  }
  //使用当前日期作为开始日期
  function useTodayAsStart() {
    var checked = document.getElementById('startCb').checked;
    useToday(1, checked);
  }
  //使用当前日期作为结束日期
  function useTodayAsEnd() {
    var checked = document.getElementById('endCb').checked;
    useToday(2, checked);
  }
  /**
   * 使用当前日期。
   * @param flag 1-开始日期 2-结束日期
   * @param checked true-使用当前时期 false-取消使用当前日期
   */
  function useToday(flag, checked) {
    var elements;
    if (flag == 1) {
      elements = getElements(['year', 'month', 'day']);
    } else {
      elements = getElements(['year2', 'month2', 'day2']);
    }
    if (checked) {
      //使用当前日期
      var ymd = getTodayYMD();
      var a;
      //设置年
      var yEle = elements[0];
      for (a = 0; a < yEle.options.length; a++) {
        if (yEle.options[a].value == ymd[0]) {
          yEle.options[a].selected = "selected";
          break;
        }
      }
      //设置月
      var mEle = elements[1];
      for (a = 0; a < mEle.options.length; a++) {
        if (mEle.options[a].value == ymd[1] + 1) {
          mEle.options[a].selected = "selected";
          break;
        }
      }
      //根据年和月更新日列表
      update(flag);
      //设置日
      var dEle = elements[2];
      for (a = 0; a < dEle.options.length; a++) {
        if (dEle.options[a].value == ymd[2]) {
          dEle.options[a].selected = "selected";
          break;
        }
      }
    }
    for (var i = 0; i < elements.length; i++) {
      elements[i].disabled = checked ? "disabled" : undefined;
    }
  }
</script>
</body>
</html>

(2)外部js文件:

/**
 * dayCounter.
 * Created by Jack on 16-11-29.
 */
/**
 * 通过元素的id获取Element.
 * @param arr id数组.
 */
function getElements(arr) {
  var elements = [];
  for (var i = 0; i < arr.length; i++) {
    elements.push(document.getElementById(arr[i]));
  }
  return elements;
}
//初始化年月日
function initView(arr) {
  var elements = getElements(arr);
  //年
  for (var i = 2048; i >= 1949; i--) {
    var option = document.createElement("option");
    option.setAttribute("value", "" + i);
    option.appendChild(document.createTextNode("" + i));
    //默认选中2017年
    if (i == 2017) {
      option.setAttribute("selected", "selected")
    }
    elements[0].appendChild(option);
  }
  //月
  for (var a = 1; a <= 12; a++) {
    var optionM = document.createElement("option");
    optionM.setAttribute("value", "" + a);
    optionM.appendChild(document.createTextNode((a < 10 ? "0" : "") + a));
    elements[1].appendChild(optionM);
  }
  //日
  initDay(elements[2], 31, 1);
}
function initDay(day, dayCount, selectedValue) {
  for (var i = 1; i <= dayCount; i++) {
    var optionD = document.createElement("option");
    optionD.setAttribute("value", "" + i);
    if (i == selectedValue) {
      optionD.setAttribute("selected", "selected");
    }
    optionD.appendChild(document.createTextNode((i < 10 ? "0" : "") + i));
    day.appendChild(optionD);
  }
}
//当年和月发生变化时,更新日
function updateDaySelect(arr) {
  var elements = getElements(arr);
  //选中年
  var y = elements[0].options[elements[0].selectedIndex].value;
  //选中月
  var m = elements[1].options[elements[1].selectedIndex].value;
  if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
    setupDay(elements[2], 31);
  } else if (m == 4 || m == 6 || m == 9 || m == 11) {
    setupDay(elements[2], 30);
  } else {
    //判断是否为闰年
    if ((y % 4 == 0 && y % 100 != 0 ) || y % 400 == 0) {
      setupDay(elements[2], 29);
    } else {
      setupDay(elements[2], 28);
    }
  }
}
//更新 日 select元素
function setupDay(day, dayCount) {
  //判断是否需要刷新
  if (day.options.length == dayCount) {
    //无需刷新
    return;
  }
  //原来选中的 日
  var oldValue = day.options[day.selectedIndex].value;
  if (oldValue > dayCount) {
    oldValue = dayCount;
  }
  //首先移除所有子元素
  for (var i = day.childNodes.length - 1; i >= 0; i--) {
    day.removeChild(day.childNodes.item(i))
  }
  //添加元素
  initDay(day, dayCount, oldValue);
}
function getSelectedText(ele) {
  return ele.options[ele.selectedIndex].text;
}
function getDateStr(arr) {
  var elements = getElements(arr);
  return getSelectedText(elements[0]) + "/" + getSelectedText(elements[1]) + "/" + getSelectedText(elements[2]);
}
/**
 * 计算天数,日期格式为 2016/08/09
 * @param startDay 开始日期
 * @param endDay 结束日期
 */
function calDayCount(startDay, endDay) {
  var s = new Date(startDay + " 00:00:00").getTime();
  var e = new Date(endDay + " 00:00:00").getTime();
  return (e - s) / 86400000;
}
function getTodayYMD() {
  var date = new Date();
  return [date.getFullYear(), date.getMonth(), date.getDate()];
}

完整demo实例代码点击此处本站下载

PS:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用:

在线日期/天数计算器:
http://tools.3water.com/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器:
http://tools.3water.com/jisuanqi/datecalc

在线日期天数差计算器:
http://tools.3water.com/jisuanqi/onlinedatejsq

在线天数计算器:
http://tools.3water.com/jisuanqi/datejsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
js切换div css注意的细节
Dec 10 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
Node.js插件安装图文教程
May 06 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
原生Javascript插件开发实践
Jan 18 #Javascript
js实现炫酷的左右轮播图
Jan 18 #Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
十天学会php之第二天
2006/10/09 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
jquery等待效果示例
2014/05/01 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python如何对实例属性进行类型检查
2018/03/20 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
股份合作协议书范本
2014/04/14 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏