原生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类继承机制的原理分析
Sep 12 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
javascript实现的简单计时器
Jul 19 Javascript
js中this对象用法分析
Jan 05 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php中文本操作的类
2007/03/17 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript 三种编解码方式
2010/02/01 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
大学生收银员求职信分享
2014/01/02 职场文书
爱国演讲稿500字
2014/05/04 职场文书
文案策划岗位职责
2015/02/11 职场文书
实习生辞职信范文
2015/03/02 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书