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代码
Apr 22 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
关于vue面试题汇总
Mar 20 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
vue+element tabs选项卡分页效果
Jun 29 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
网络资源
2006/10/09 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
CURL状态码列表(详细)
2013/06/27 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
django 将model转换为字典的方法示例
2018/10/16 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
工作评语大全
2014/04/26 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
预备党员群众意见
2015/06/01 职场文书