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可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
node.js从数据库获取数据
May 08 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
js实现分割上传大文件
2016/03/09 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
CSS3盒子模型详解
2013/04/24 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
保护野生动物倡议书
2014/05/16 职场文书
职务任命书范本
2014/06/05 职场文书
车间主任岗位职责
2015/02/03 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
大学生入党群众意见书
2015/06/02 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js