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：简易天数计算器相关推荐

html计算天数,Javascript实现简易天数计算器
本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下效果图: 功能: 1. 支持选择日期: 2. 自动计算闰年: 3. 支持使用当前日期. 代码: (1)h ...
[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!
目录事件错误处理 1.隐藏/显示文字 2.简单的加法计算器效果: ★★★3.简易利息计算器效果: 事件 javascript允许html与用户交互的行为例如:鼠标点击事件 & ...
JavaScript最简单的方法实现简易的计算器
文章目录前言一.效果图二.代码 1.HTML代码 2.CSS代码 3.JavaScript代码总结前言 JavaScript最简单的方法实现简易的加减乘除计算器一.效果图二.代码 1.H ...
JavaScript简易计算器制作
成品图这个简易的计算器只能实现 + - * /的运算在动手之前,我们要先理清思路,看图,若想实现这样一个简易的计算器,我们需要两个输入框用来存放我们需要进行运算的两个值,一个下拉框来选择要进行什么 ...
html中加法计算器的代码,JavaScript实现简易加法计算器
本文实例为大家分享了JavaScript实现加法计算器的具体代码,供大家参考,具体内容如下具体要求: 1.页面布局: 2.还需要在点击计算按钮之后在页面上显示计算结果具体实现: 计算器 funct ...
制作一个简易的计算器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
PHP代码实现一个简易的计算器
用php实现一个简易的计算器实现简单计算器的具体php代码如下: ```php <html> <head> <title>网页计算器</title> ...
利用Unity3D制作简易2D计算器
利用Unity3D制作简易2D计算器标签(空格分隔): uiniy3D 1. 操作流程在unity3DD中创建一个新项目注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本在新建 ...
用链栈实现简易四则运算计算器(php版)
栈是一种限定仅在表尾进行插入和删除操作的线性表.栈的应用有很多,比如常见的递归,计算机表达式求值等.下面我们用栈来实现简易的四则运算计算器. 列一下本文的思路: 实现链栈的数据结构及其操作中缀表达式 ...
python 正则的使用 —— 编写一个简易的计算器
python 正则的使用 -- 编写一个简易的计算器在 Alex 的博客上看到的对正则这一章节作业是编写一个计算器,要求能计算出下面的算式. 1 - 2 * ( (60-30 +(-40/5) * ...

Javascript：简易天数计算器

Javascript：简易天数计算器相关推荐

最新文章

热门文章