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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
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新手上路(五)
2006/10/09 PHP
PHP 中的批处理的实现
2007/06/14 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
js读取注册表的键值示例
2013/09/25 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Less 安装及基本用法
2018/05/05 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
区域总监的岗位职责
2013/11/21 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
新农村建设典型材料
2014/05/31 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python