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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
微信小程序开发打开另一个小程序的实现方法
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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
EJB timer的种类
2014/10/28 面试题
专业求职信撰写要诀
2014/02/18 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
元宵节晚会主持词
2015/07/01 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
入党转正申请书范文
2019/05/20 职场文书
创业计划书之面包店
2019/09/17 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL