JS实现简单的天数计算器完整实例


Posted in Javascript onApril 28, 2017

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

刚学了JS,想做个计算两个日期之间相差天数的东西,因为本人总是要算距离XX还有多少天。。

开始用很笨的方法写了一个,写完百度了一下,发现用 Date() 的话 几行代码就可以搞定。自己看语法的时候一扫而过,觉得会了,其实是不会的,至少在该用它的时候都想不到他有这个功能,这就是掌握类库的重要性吧。

先放上写的很笨的那种方法:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>天数计算器</title>
  <script src="../lib/js/jquery-2.1.1.js"></script>
  <script src="year.js"></script>
</head>
<body>
  <h2>天数计算器</h2>
  <div>
    <label>起:</label>
    <input type="text" id="beginYear">
    <label >年</label>
    <input type="text" id="beginMonth">
    <label >月</label>
    <input type="text" id="beginDay">
    <label >日</label>
  </div>
  <br>
  <div>
    <label>止:</label>
    <input type="text" id="endYear">
    <label >年</label>
    <input type="text" id="endMonth">
    <label >月</label>
    <input type="text" id="endDay">
    <label >日</label>
  </div>
  <br>
  <div>
    <input type="button" id="submit" value="确定" onclick="days()">
    <input type="button" id="cancel" value="取消">
  </div>
  <script>
    function days() {
      // 一年的第几天
      var day1 = YEAR.dayOfYear( Number($("#beginYear").val()), Number($("#beginMonth").val()) ) + Number($("#beginDay").val());
      var day2 = YEAR.dayOfYear( Number($("#endYear").val()), Number($("#endMonth").val()) ) + Number($("#endDay").val());
      var year1 = Number($("#beginYear").val());
      var year2 = Number($("#endYear").val());
      if ( year1 < year2 ) {
        var sum = YEAR.yearCount( Number($("#beginYear").val()), Number($("#endYear").val()) );
        if ( YEAR.isLeapYear( year1 ) )
          sum = sum + (366 - day1) + day2;
        else
          sum = sum + (365 - day1) + day2;
        alert("之间有" + sum + "天!");
      } else if ( year1 == year2 ) {
          sum = day2 - day1;
        alert("之间有" + sum + "天!");
      } else {
        $(function() {
          alert("请输入正确的起止时间!");
        });
      }
    }
  </script>
</body>
</html>

year.js

window.YEAR = {
  // 判断是不是闰年
  isLeapYear : function (year) {
    if((year % 4 == 0 && year % 100 !=0 ) || year % 400 == 0)
      return true;
    else
      return false;
  },
  // 相差的整年数,换算成天数
  yearCount : function (yearBefore, yearAfter) {
    var year = yearBefore + 1;
    var sum = 0;
    while (year < yearAfter) {
      if ( YEAR.isLeapYear(year) )
        sum = sum + 366;
      else
        sum = sum + 365;
      year++;
    }
    return sum;
  },
  // 一年中的第几天,只计算到月份
  dayOfYear : function (year, month ) {
    var myYear = year;
    var sum = 0;
    for(var i = 1; i < month; i++) {
      switch(i) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
          sum = sum + 31;
          break;
        case 4:
        case 6:
        case 9:
        case 11:
          sum = sum + 30;
          break;
        case 2:
          if(YEAR.isLeapYear(myYear))
            sum = sum + 29;
          else
            sum = sum + 28;
          break;
      }
    }
    return sum;
  },
};

下面说另一种方法,主要用到Date里面的Date.parse(),具体使用详情,w3school上面有。下面代码~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>天数计算器</title>
  <script src="../lib/js/jquery-2.1.1.js"></script>
  <script src="year.js"></script>
</head>
<body>
  <h2>天数计算器</h2>
  <div>
    <label>起:</label>
    <input type="text" id="beginYear">
    <label >年</label>
    <input type="text" id="beginMonth">
    <label >月</label>
    <input type="text" id="beginDay">
    <label >日</label>
  </div>
  <br>
  <div>
    <label>止:</label>
    <input type="text" id="endYear">
    <label >年</label>
    <input type="text" id="endMonth">
    <label >月</label>
    <input type="text" id="endDay">
    <label >日</label>
  </div>
  <br>
  <div>
    <input type="button" id="submit" value="确定" onclick="test()">
    <input type="button" id="cancel" value="取消">
  </div>
  <script>
    function test() {
      var minutes = 1000 * 60
      var hours = minutes * 60
      var days = hours * 24
      var y1 = Number($("#beginYear").val());
      var m1 = Number($("#beginMonth").val());
      var d1 = Number($("#beginDay").val());
      var y2 = Number($("#endYear").val());
      var m2 = Number($("#endMonth").val());
      var d2 = Number($("#endDay").val());
      var date1 = $("#beginYear").val() +',' + $("#beginMonth").val() +','+ $("#beginDay").val();
      var date2 = $("#endYear").val() +','+ $("#endMonth").val() + ','+$("#endDay").val();
      var day1 = Date.parse(date1);
      var day2 = Date.parse(date2);
      d = day2 - day1;
      d = d / days;
      alert("之间有" + d + "天!");
    }
  </script>
</body>
</html>

以后要继续优化界面,争取使用起来感觉更好,尤其是界面~

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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
js实现移动端编辑添加地址【模仿京东】
Apr 28 #Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 #Javascript
d3.js入门教程之数据绑定详解
Apr 28 #Javascript
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
JS实现动态添加DOM节点和事件的方法示例
Apr 28 #Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
ie focus bug 解决方法
2009/09/03 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python实现redis三种cas事务操作
2017/12/19 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
大学秋游活动方案
2014/02/11 职场文书
烹饪自我鉴定
2014/03/01 职场文书
护士自我鉴定总结
2014/03/24 职场文书
感恩寄语大全
2014/04/11 职场文书
文化建设工作方案
2014/05/12 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
董存瑞观后感
2015/06/11 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书