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 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
JS+DIV实现拖动效果
Feb 11 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 STRING 陷阱原理说明
2010/07/24 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
送货司机岗位职责
2013/12/11 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
军训自我鉴定100字
2014/02/13 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
工会文体活动总结
2015/05/07 职场文书
公司宣传语大全
2015/07/13 职场文书