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 location几个方法小姐
Jul 09 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
公众号SVG动画交互实战代码
May 31 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中字符串和正则表达式详解
2014/10/23 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
Js基础学习资料
2010/11/23 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Vue组件化开发思考
2018/02/02 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
实习单位指导教师评语
2014/12/30 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
匿名信格式范文
2015/05/27 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
浅谈Node的内存泄露问题
2022/05/06 NodeJs