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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
jQuery实现图片切换效果
Oct 19 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
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python字符串详细介绍
2015/05/09 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
详解Python中的四种队列
2018/05/21 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
linux面试相关问题
2013/04/28 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
保护环境倡议书500字
2014/05/19 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
毕业生学校组织意见
2015/06/04 职场文书
简爱电影观后感
2015/06/10 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
PHP实现两种排课方式
2021/06/26 PHP