原生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全部源代码
May 04 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php文件缓存类汇总
2014/11/21 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
js canvas实现写字动画效果
2018/11/30 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python遍历类中所有成员的方法
2015/03/18 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
党员的自我评价范文
2014/01/02 职场文书
数控专业自荐书范文
2014/03/16 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
golang 语言中错误处理机制
2021/08/30 Golang
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS