原生js实现日期计算器功能

 更新时间:2017年02月17日 10:42:48   作者:火红橘子  
这篇文章主要为大家详细介绍了原生js实现日期计算器功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了日期计算器的具体实现代码,供大家参考,具体内容如下

日期计算器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中关于数组的调用方式

    这篇文章主要介绍了JavaScript中关于数组的调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • JavaScript中一些奇怪的问题及解决分享

    JavaScript中一些奇怪的问题及解决分享

    JavaScript 在开发过程中可能会出现很多奇怪的问题。这篇文章主要为大家整理了一些JavaScript中奇怪的问题及解决方法,感兴趣的可以了解一下
    2023-03-03
  • 微信二次分享报错invalid signature问题及解决方法

    微信二次分享报错invalid signature问题及解决方法

    基于微信公众号开发的h5页面(使用jssdk接口),由用户A分享给用户B,用户B再次分享这个页面时,不能成功分享。这篇文章主要介绍了微信二次分享报错invalid signature问题及解决方法,需要的朋友可以参考下
    2019-04-04
  • js自定义trim函数实现删除两端空格功能

    js自定义trim函数实现删除两端空格功能

    这篇文章主要介绍了js自定义trim函数实现删除两端空格功能,结合实例形式分析了javascript基于正则替换实现类似trim函数删除字符串两端空格的相关操作技巧,并附带jQuery类似功能函数使用方法,需要的朋友可以参考下
    2018-02-02
  • JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码

    JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码

    最近项目需要屏蔽客户端的一些操作,加大查看源码等难度,特整理一下这个js,也防止客户端用户误操作,破解方放也很简单这里就不多说了
    2020-10-10
  • Javascript 实用小技巧

    Javascript 实用小技巧

    都是一些非常不错的js 小技巧,学习js的朋友一定要看下,有很多不错的代码。
    2010-04-04
  • JavaScript的异步ajax详解

    JavaScript的异步ajax详解

    篇文章主要为大家详细介绍了JavaScript 异步ajax,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下吗,希望能够给你带来帮助
    2022-03-03
  • 微信小程序实现日历签到

    微信小程序实现日历签到

    这篇文章主要为大家详细介绍了微信小程序实现日历签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 通过JavaScript使Div居中并随网页大小改变而改变

    通过JavaScript使Div居中并随网页大小改变而改变

    自己的页面太难看了,要居中没居中,要颜色没颜色,但是无论是怎么样都得使登录的框居中吧,下面与大家分享下通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变
    2013-06-06
  • 如何用JS WebSocket实现简单聊天

    如何用JS WebSocket实现简单聊天

    这篇文章主要介绍了如何用JS WebSocket实现简单聊天,对websocket感兴趣的同学,可以参考下
    2021-05-05

最新评论