JavaScript简单计算人的年龄示例

下面我会详细讲解如何实现“JavaScript简单计算人的年龄示例”,主要步骤如下:

第一步:获取出生年份

要计算一个人的年龄,首先我们需要获取他的出生年份。在JavaScript中,我们可以通过 prompt()函数获取用户在弹出的对话框中输入的信息。代码如下所示:

let birthYear = prompt('请输入你的出生年份');

这里用 let 声明变量 birthYear 并赋初值为 prompt('请输入你的出生年份'),通过调用 prompt() 函数,弹出一个对话框要求输入出生年份。同时该语句的返回值将会被赋值给 birthYear 变量。

第二步:计算年龄

获取到出生年份后,我们可以通过获取当前年份,然后计算两者的差值来得到年龄。在JavaScript中,我们可以使用 Date 对象来获取当前年份,并在代码中进行简单的计算。代码如下所示:

let now = new Date();
let year = now.getFullYear();
let age = year - birthYear;

上述代码中,我们用 Date() 函数声明了一个日期对象 now 用以获取当前时间。通过 getFullyear() 函数得到了当前年份值,将其赋值于变量 year,然后将 birthYear 减去 year,得到年龄并将结果赋值于变量 age

第三步:输出结果

最后,我们需要将它输出至页面上。在这里,我们可以将结果添加至一个 HTML 元素中,并将其显示在页面上。代码如下所示:

let ageElement = document.createElement('h3'); 
ageElement.innerHTML = `你的年龄是 ${age} 岁`;
document.body.appendChild(ageElement);

上述代码中,我们使用 document.createElement() 函数创建了一个 <h3> 元素,并将它存储在 ageElement 变量中,在元素中存入字符串,该字符串包含内容为计算出的年龄的文本。随后,我们将 ageElement 添加至 document.body 中来显示计算出的年龄。

示例应用

示例一:计算年龄

假设用户输入的出生年份是“1997”,则按照上述步骤计算出的年龄为 year - birthYear,即 2022 - 1997 = 25

let birthYear = prompt('请输入你的出生年份');
let now = new Date();
let year = now.getFullYear();
let age = year - birthYear;

let ageElement = document.createElement('h3'); 
ageElement.innerHTML = `你的年龄是 ${age} 岁`;
document.body.appendChild(ageElement);

示例二:对输入的出生年份格式进行验证

由于用户可能会输入非法数据,例如输入非数字或者不符合年份输入规则的文本,因此我们需要对用户输入的出生年份格式进行验证。示例代码如下:

let birthYear = prompt('请输入你的出生年份');

while (isNaN(parseInt(birthYear)) || birthYear.length !== 4) {
  birthYear = prompt('请输入符合年份格式规则的出生年份');
}

let now = new Date();
let year = now.getFullYear();
let age = year - birthYear;

let ageElement = document.createElement('h3'); 
ageElement.innerHTML = `你的年龄是 ${age} 岁`;
document.body.appendChild(ageElement);

在这个代码中,我们使用了一个 while 循环,来要求用户必须输入符合规则的年份才能继续执行其余代码。isNaN(parseInt(birthYear)) 判断用户输入的年份必须是整数格式(由于 prompt() 返回字符串类型,因此需要转换为数字类型),而 birthYear.length !== 4 则验证了输入年份格式必须是四位数字。这样,我们就保证了用户输入数据的合法性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript简单计算人的年龄示例 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • js字符串转换为对象格式的三种方法总结

    下面详细讲解一下“js字符串转换为对象格式的三种方法总结”的完整攻略。 标题 js字符串转换为对象格式的三种方法总结 正文 在日常开发中,我们经常需要将字符串转换成对象格式。下面总结了三种常用的方法: 方法一:eval() eval()是一种将字符串解析成js代码并运行的方法。通过将字符串转成函数执行,在函数内部给一个对象赋值并将它的引用返回。 示例代码: …

    JavaScript 2023年5月27日
    00
  • JS逆向之浏览器补环境图文详解

    JS逆向技术是黑客攻击的重要手段之一,它可以帮助黑客突破各种安全防线,获得非法访问权限。其中,浏览器补环境是逆向技术中的一项重要内容,下面我将为大家详细讲解相关攻略。 什么是浏览器补环境? 浏览器补环境,或者说沙盒环境,是指浏览器运行JS脚本时,为了确保安全性而对JS代码的执行环境进行隔离。在这种沙盒环境下,JS脚本只能访问指定的环境变量和API,且对于底层…

    JavaScript 2023年5月28日
    00
  • JavaScript 中创建私有成员

    创建私有成员在 JavaScript 中是非常常见和重要的需求。可以利用 JavaScript 中的作用域和闭包机制来实现。 在JavaScript中可以通过函数的声明来创建一个私有作用域,在函数中声明的变量和函数都是内部私有的,从而实现私有成员。 具体实现过程如下: 创建一个外部函数,内部定义需要私有的成员。 function myObject() { /…

    JavaScript 2023年6月10日
    00
  • 微信小程序 生命周期和页面的生命周期详细介绍

    下面详细讲解一下微信小程序的生命周期和页面的生命周期: 微信小程序生命周期介绍 微信小程序生命周期分为两个部分:全局生命周期和页面生命周期。全局生命周期是指在整个小程序中被执行的方法,而页面生命周期则是指在页面中被执行的方法。 全局生命周期 全局生命周期包含以下方法: 1. onLaunch(options) 在小程序初始化完成时执行,只会执行一次。 参数说…

    JavaScript 2023年6月11日
    00
  • js表单元素checked、radio被选中的几种方法(详解)

    当我们需要在Web页面中收集用户输入时,表单是不可缺少的工具之一。而表单元素中的checkbox和radio这两种类型的输入框对于选项的选择有着重要的作用。然而,如何通过JavaScript获取选中的checkbox或radio的值呢?下面我们将详细讲解这个问题。 1. checked属性 对于单个的checkbox,我们可以通过其checked属性来检查其…

    JavaScript 2023年6月10日
    00
  • 浅谈javascript中的Function和Arguments

    关于”浅谈JavaScript中的Function和Arguments”这个话题,我会讲解如下: Function 在 JavaScript 中,Function 是一个构造函数,可以用来创建函数。它包含一个函数体和参数列表: function myFunction(a, b) { return a + b; } 在上面这个示例中,myFunction 就是…

    JavaScript 2023年5月27日
    00
  • document.getElementById为空或不是对象的解决方法

    问题背景 在web开发中,常常使用到document.getElementById()方法来获取特定的DOM元素。但有时候会因为各种原因而出现document.getElementById为空或不是对象的错误提示,让开发者很苦恼,并且无法正常运行。 问题原因 造成该错误提示的原因很多,最常见的有以下几种: 当DOM元素尚未加载进页面时尝试获取 DOM元素的I…

    JavaScript 2023年6月10日
    00
  • js关闭当前页面(窗口)的几种方式总结

    关于“js关闭当前页面(窗口)的几种方式总结”,我为大家总结了以下几种方式: 方式一:使用window.close() 在JS中使用window.close()方法可以关闭当前页面,示例代码如下: <button onclick="window.close()">关闭当前页面</button> 需要注意的是,该方法…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部