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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
VUE项目实现主题切换的多种方法
Nov 26 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
Express的路由详解
2015/12/10 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
js中的面向对象入门
2017/03/06 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
python删除文件示例分享
2014/01/28 Python
python中redis的安装和使用
2016/12/04 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
先进教育工作者事迹材料
2014/12/23 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫