Javascript实现简易天数计算器


Posted in Javascript onMay 18, 2020

本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下

效果图:

Javascript实现简易天数计算器

功能:

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

代码:

(1)html文件:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>简易天数计算器</title>
 <script type="text/javascript" src="js/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));

  //默认选中2016年
  if (i == 2016) {
   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()];
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
js继承实现方法详解
Dec 16 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 #Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 #Javascript
关于AngularJS中几种Providers的区别总结
May 17 #Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 #Javascript
JavaScript链式调用原理与实现方法详解
May 16 #Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 #Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
You might like
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP文件操作实例总结
2016/09/27 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
详解用JS添加和删除class类名
2019/03/25 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
Python使用openpyxl复制整张sheet
2021/03/24 Python
《雷雨》教学反思
2014/02/20 职场文书
初中学习计划书范文
2014/09/15 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server