Javascript实现简易天数计算器
程序员文章站
2022-06-17 14:35:11
本文实例为大家分享了javascript实现简易天数计算器的具体代码，供大家参考，具体内容如下效果图： 功能：1. 支持选择日期； 2. 自动计算闰年； 3. 支持使用当前日期。代码： （1）html...
本文实例为大家分享了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()];
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。