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分割字符串并放入数组的函数
Jul 04 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
Sort()函数的多种用法
Mar 20 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 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
一个简单实现多条件查询的例子
2006/10/09 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python六大开源框架对比
2015/10/19 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python开发游戏的前期准备
2019/05/05 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
详解Python中import机制
2020/09/11 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
2014年两会学习心得体会
2014/03/17 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL