原生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计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
js导出txt示例代码
Jan 14 Javascript
浅谈JavaScript字符集
May 22 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 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
图解上海144收音机
2021/03/02 无线电
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
大学生评语大全
2014/04/18 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
推销搭讪开场白
2015/05/28 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
小学教师教学反思
2016/02/24 职场文书
解决Redis启动警告问题
2022/02/24 Redis