热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Javascript实现简易天数计算器

这篇文章主要为大家详细介绍了Javascript实现简易天数计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图:

功能:

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

代码:

(1)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 = 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 &#63; "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 &#63; "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中带有加号 - 减号(±)的极坐标曲线方程 - Polar curve equation with plus-minus sign (±) in Javascript
    IamtryingtodrawpolarcurvesonHTMLcanvasusingJavascript.WhatshouldIdowhenIwanttoco ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • 电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 本文是一位90后程序员分享的职业发展经验,从年薪3w到30w的薪资增长过程。文章回顾了自己的青春时光,包括与朋友一起玩DOTA的回忆,并附上了一段纪念DOTA青春的视频链接。作者还提到了一些与程序员相关的名词和团队,如Pis、蛛丝马迹、B神、LGD、EHOME等。通过分享自己的经验,作者希望能够给其他程序员提供一些职业发展的思路和启示。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
author-avatar
mobiledu2502886767
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有