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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
详谈JavaScript内存泄漏
2014/11/14 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python实现AES加密和解密
2019/03/27 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
留学推荐信怎么写
2014/01/25 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
公司停电通知
2015/04/15 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android