原生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中的style.display属性操作
Mar 27 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
ES5和ES6中类的区别总结
Dec 21 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
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python决策树之CART分类回归树详解
2017/12/20 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python通过链接抓取网站详解
2019/11/20 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python Canny边缘检测算法的实现
2020/04/24 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
会计自我鉴定范文
2013/10/06 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
护士的自我鉴定
2014/02/07 职场文书
内勤岗位职责
2015/02/10 职场文书
2016春季小学开学寄语
2015/12/03 职场文书