原生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代码加载优化方法
Jan 30 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
javascript实现简易聊天室
Jul 12 Javascript
JavaScript运行机制实例分析
Apr 11 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内置的Math函数效率测试
2014/12/01 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript解析json实例详解
2014/11/05 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery实现跨域
2015/02/03 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python用GET方法上传文件
2015/03/10 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python实现石头剪刀布游戏
2021/01/20 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
2016年中秋节晚会领导致辞
2015/11/26 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB