这篇文章主要为大家详细介绍了原生 js 实现日期计算器功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
日期计算器 html 代码片段:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 日期计算器
- </title>
- <script type="text/javascript" src="date_calc.js">
- </script>
- </head>
- <body>
- <br>
- <br>
- <b>
- 推算几天后的日期:
- </b>
- <br>
- 和
- <input size="8" id="SY" value="2016">
- 年
- <input size="4" id="SM" value="11">
- 月
- <input size="4" id="SD" value="16">
- 日 (缺省为今天)
- <br>
- 相差
- <input size="8" id="decday" value="100">
- 天 (输入负数则往前计算)
- <br>
- 是:
- <span id="result1">
- </span>
- <br>
- <input type=button value="计算" onclick="cala()">
- <br>
- <b>
- 计算日期差:
- </b>
- <br>
- <input size="8" id="SY2" value="2016">
- 年
- <input size="4" id="SM2" value="11">
- 月
- <input size="4" id="SD2" value="16">
- 日
- <br>
- 和
- <input size="8" id="SY3" value="2017">
- 年
- <input size="4" id="SM3" value="1">
- 月
- <input size="4" id="SD3" value="1">
- 日
- <br>
- 相差:
- <span id="result2">
- </span>
- 天
- <br>
- <input type=button value="计算" onclick="calb()">
- <br>
- </body>
- </html>
date_calc.js 代码片段:
- var hzWeek= new Array("日","一","二","三","四","五","六","日");
- //获取星期
- function cweekday(wday)
- {return hzWeek[wday];}
- function cala()
- {
- y=document.getElementById("SY").value;
- m=document.getElementById("SM").value;
- d=document.getElementById("SD").value;
- ddd=document.getElementById("decday").value;
- ttt=new Date(y,m-1,d).getTime()+ddd*24000*3600;
- theday=new Date();
- theday.setTime(ttt);
- document.getElementById("result1").innerHTML=theday.getFullYear()+"年"+(1+theday.getMonth())+"月"+theday.getDate()+"日"+"星期"+cweekday(theday.getDay());
- }
- function calb()
- {
- y2=document.getElementById("SY2").value;
- m2=document.getElementById("SM2").value;
- d2=document.getElementById("SD2").value;
- y3=document.getElementById("SY3").value;
- m3=document.getElementById("SM3").value;
- d3=document.getElementById("SD3").value;
- day2=new Date(y2,m2-1,d2);
- day3=new Date(y3,m3-1,d3);
- document.getElementById("result2").innerHTML=(day3-day2)/86400000;
- }
来源: http://www.phperz.com/article/17/0601/327546.html