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居然支持中文(unicode)编程!
Apr 12 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
js 浏览器事件介绍
2012/03/30 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
简单快速的实现js计算器功能
2017/08/17 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python卸载模块的方法汇总
2016/06/07 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
树莓派升级python的具体步骤
2020/07/05 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书