原生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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
range 标准化之获取
Aug 28 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
vue获取form表单的值示例
Oct 29 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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
一个改进的UBB类
2006/10/09 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
google广告之另类js调用实现代码
2020/08/22 Javascript
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python爬取内容存入Excel实例
2019/02/20 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python中的整除和取模实例
2020/06/03 Python
基于python实现操作git过程代码解析
2020/07/27 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
企划经理的岗位职责
2013/11/17 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python