原生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 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
小程序实现列表倒计时功能
Jan 29 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP的FTP学习(三)
2006/10/09 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python实现数据图表
2017/07/29 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
餐饮加盟计划书
2014/01/10 职场文书
图书室管理制度
2014/01/19 职场文书
校运会广播稿100字
2014/01/27 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
安全协议书
2014/04/23 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
社区务虚会发言材料
2014/10/20 职场文书
实验室安全管理制度
2015/08/05 职场文书