原生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 列表双向选择器之改进版
Aug 09 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
浅析javascript函数表达式
Feb 10 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
js中开关变量使用实例
Feb 24 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
js+html实现点名系统功能
Nov 05 Javascript
JS实现烟花爆炸效果
Mar 10 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
vue实现图片裁剪后上传
2020/12/16 Vue.js
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python入门教程之运算符与控制流
2016/08/17 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python使用functools实现注解同步方法
2018/02/06 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python实现京东抢秒杀功能
2021/01/25 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
七一党建活动方案
2014/01/28 职场文书
土地转让协议书范本
2014/04/15 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Python绘画好看的星空图
2022/03/17 Python
golang生成并解析JSON
2022/04/14 Golang