• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 原生js实现日期计算器功能

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

作者:火红橘子 字体:[增加 减小] 来源:互联网 时间:2017-05-11

火红橘子通过本文主要向大家介绍了laydate原生js,原生js,原生js是什么意思,原生js轮播图,原生js点击事件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

日期计算器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>

</div>

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;


}
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Bootstrap.css与layDate日期选择样式起冲突的解决办法
  • 原生JS实现圆环拖拽效果
  • 原生JS实现左右箭头选择日期实例代码
  • 原生js仿淘宝网商品放大镜效果
  • 原生js实现可拖拽效果
  • 利用原生JS与jQuery实现数字线性变化的动画
  • 原生JS实现幻灯片
  • 原生js实现放大镜
  • 原生js实现日期计算器功能
  • 原生JS实现简单放大镜效果

相关文章

  • 2017-05-11jQuery的ajax中使用FormData实现页面无刷新上传功能
  • 2017-05-11Bootstrap3下拉菜单的实现
  • 2017-05-11浅谈angularjs依赖服务注入写法的注意点
  • 2017-05-11JavaScript获取ul中li个数的方法
  • 2017-05-11js仿QQ邮箱收件人选择与搜索功能
  • 2017-05-11Angular在一个页面中使用两个ng-app的方法
  • 2017-05-11ES6中module模块化开发实例浅析
  • 2017-05-11jQuery实现对象转为url参数的方法
  • 2017-05-11js replace()去除代码中空格的实例
  • 2017-05-11ajax 提交数据到后台jsp页面及页面跳转问题

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Bootstrap按钮组简单实现代码
    • js函数去掉html中的注释
    • JavaScript获取键盘按键的键码(参照表)
    • Yaml快速入门
    • 基于vue.js实现侧边菜单栏
    • js实现自定义路由
    • AngularJS之自定义服务详解(factory、service、provider)
    • input输入密码变黑点密文的实现方法
    • 微信小程序 本地数据存储实例详解
    • angularjs实现下拉列表的选中事件示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有