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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
js replace替换字符串同时替换多个方法
Nov 27 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
node+vue实现文件上传功能
May 28 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的可变变量名的使用方法分享
2012/02/05 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
checkbox 复选框不能为空
2009/07/11 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
python实现简单socket通信的方法
2016/04/19 Python
python放大图片和画方格实现算法
2018/03/30 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python一键去抖音视频水印工具
2018/09/14 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
python中删除某个元素的方法解析
2019/11/05 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
SQL Server面试题
2013/04/04 面试题
坎儿井导游词
2015/02/09 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
酒店厨房管理制度
2015/08/06 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python