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中this关键字(翻译+自我理解)
Oct 20 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
jQuery表单验证之密码确认
May 22 jQuery
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 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中创建并处理图象
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python之批量创建文件的实例讲解
2018/05/10 Python
python中类的属性和方法介绍
2018/11/27 Python
python中字符串的编码与解码详析
2020/12/03 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
高校学生干部的自我评价分享
2013/11/04 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Django+Celery实现定时任务的示例
2021/06/23 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS