js+html实现周岁年龄计算器


Posted in Javascript onJune 25, 2019

本文实例为大家分享了js+html实现周岁年龄计算器的具体代码,供大家参考,具体内容如下

输入界面展示:

js+html实现周岁年龄计算器

输出结果展示:

js+html实现周岁年龄计算器

实现代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <div>
 <!-- 设计输入及点击界面 -->
 <p>请输入您的出生日期(yyy/mm/dd):</p>
 <input type="text" style="width: 60px;" id="year">/
 <input type="text" style="width: 60px;" id="month">/
 <input type="text" style="width: 60px;" id="day"></br>
 <!-- 运用button标签并设置点击事件函数 -->
 <button style="margin-top:10px " onclick="getAge()">计算</button>
 </div>
 
 <script>
 //计算周岁年龄的函数
 function getAge() {
 //定义返回值
 var returnAge
 
 //获取输入框参数
 var birthYear = document.getElementById("year").value
 var birthMonth = document.getElementById("month").value
 var birthDay = document.getElementById("day").value
 
 //获取当前时间
 d = new Date();
 var nowYear = d.getFullYear()
 var nowMonth = d.getMonth() + 1
 var nowDay = d.getDate()
 
 //计算周岁年龄差
 if (nowYear == birthYear) {
 returnAge = 0; //同年 则为0岁
 } else {
 var ageDiff = nowYear - birthYear //年之差
 if (ageDiff > 0) {
 if (nowMonth == birthMonth) {
 var dayDiff = nowDay - birthDay //日之差
 if (dayDiff < 0) {
 returnAge = ageDiff - 1
 } else {
 returnAge = ageDiff
 }
 } else {
 var monthDiff = nowMonth - birthMonth //月之差
 if (monthDiff < 0) {
 returnAge = ageDiff - 1
 } else {
 returnAge = ageDiff
 }
 }
 } else {
 returnAge = -1 //输入有误
 }
 
 }
 alert(returnAge)//结果弹窗显示
 }
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JS中数据结构之栈
Jan 01 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 #Javascript
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 #Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 #Javascript
You might like
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
json 定义
2008/06/10 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
在python中实现强制关闭线程的示例
2019/01/22 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Python os库常用操作代码汇总
2020/11/03 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
链表面试题-一个链表的结点结构
2015/05/04 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
五年级小学生评语
2014/12/26 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python