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同时按下两个方向键
Dec 01 Javascript
javascript下function声明一些小结
Dec 28 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
微信小程序实现单选功能
Oct 30 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JavaScript实现简单日历效果
Sep 11 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
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python中类型检查的详细介绍
2017/02/13 Python
浅谈Python中的bs4基础
2018/10/21 Python
django中forms组件的使用与注意
2019/07/08 Python
python 自定义装饰器实例详解
2019/07/20 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
C语言基础笔试题
2013/04/27 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
银行业务授权委托书
2014/10/10 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
Python list列表删除元素的4种方法
2021/11/01 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS