原生js实现日期计算器功能


Posted in Javascript onFebruary 17, 2017

本文实例为大家分享了日期计算器的具体实现代码,供大家参考,具体内容如下

日期计算器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;


}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
js中new一个对象的过程
Feb 20 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
Vue自定义指令拖拽功能示例
Feb 17 #Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 #Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 #Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 #Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 #Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
javascript里的条件判断
2007/02/27 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery中:animated选择器用法实例
2014/12/29 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python求crc32值的方法
2014/10/05 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Numpy掩码式数组详解
2018/04/17 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
母亲去世追悼词
2015/06/23 职场文书
贷款担保书范本
2015/09/22 职场文书