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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
许愿墙中用到的函数
Oct 07 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
详解JS面向对象编程
Jan 24 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
微信小程序实现星级评分和展示
Jul 05 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 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
2021年最新CPU天梯图
2021/03/04 数码科技
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
Python猜数字算法题详解
2020/03/01 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
八年级数学教学反思
2014/01/31 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
家电业务员岗位职责
2014/03/10 职场文书
中学校庆方案
2014/03/17 职场文书
空乘英文求职信
2014/04/13 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
抗洪救灾标语
2014/10/08 职场文书
教学质量月活动总结
2015/05/11 职场文书
小学校本教研总结
2015/08/13 职场文书
Golang 实现WebSockets
2022/04/24 Golang
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技