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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
javascript简单链式调用案例分析
May 10 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
vue router 配置路由的方法
Jul 26 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 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中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
用js实现放大镜效果
2020/10/28 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python基础教程之自定义函数介绍
2014/08/29 Python
python单元测试unittest实例详解
2015/05/11 Python
Python验证企业工商注册码
2015/10/25 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python验证码识别实例代码
2018/02/03 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
护士自我介绍信
2014/01/13 职场文书
英文求职信写作小建议
2014/02/16 职场文书
新闻发布会策划方案
2014/06/12 职场文书
国庆节活动总结
2014/08/26 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电