原生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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
详解React-Todos入门例子
Nov 08 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 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
投票管理程序
2006/10/09 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
js 文件引入实现代码
2010/04/23 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
C#实现启动一个进程
2016/10/01 面试题
生物学学生自我评价
2014/01/17 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
家教广告词
2014/03/19 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书