当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Javascript实现简易天数计算器

Javascript实现简易天数计算器

2020年06月23日  | 移动技术网IT编程  | 我要评论

花呗提现找二娃办理,cloopen,完美国际变态私服

本文实例为大家分享了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()];
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网