介绍
在网页中，我们经常会遇到需要动态生成内容的情况。其中，显示当前时间可以说是非常常见的一种需求，同时，为了使网页更加有趣，我们还会经常需要生成一些随机的数字、文字等内容。在本文中，我们将学习如何同时显示今天的年份和随机的4位数字。
实现
获取当前年份
鉴于在JavaScript中获取当前年份是一个十分基础的操作，我们将其放在第一部分介绍。获取当前年份的方法有很多，这里我们将介绍其中一种。
首先，我们可以使用Date对象的getFullYear()方法获取当前年份。该方法返回的是一个四位数的年份数字。
const now = new Date();
const year = now.getFullYear();
console.log(year); // 2021
这里的now是一个Date对象，而getFullYear()方法则是获取该对象的年份。我们可以预见到，运行上述代码会在控制台中输出2021，即当前的年份。
生成随机4位数字
有了获取当前年份的基础，我们接下来要学习如何生成随机的4位数字。同样地，生成随机数字也是一个常见的需求，因而JavaScript也为我们提供了很多不同的方法。
这里我们使用Math对象的random()方法以及一些数学计算来实现要求。Math.random()方法返回一个0到1之间的随机小数。为了得到一个4位数的随机数字，我们将该小数乘以10000，再取整即可。
const randomInt = Math.floor(Math.random() * 10000);
console.log(randomInt); // 3720
这里的randomInt即为我们需要的4位随机数字。运行上述代码，会在控制台中输出一个随机的4位数字。
将结果显示在网页上
我们已经实现了获取当前年份和生成随机4位数字的功能，接下来我们将学习如何将它们显示在网页上。
在HTML文件中，我们可以定义一个用于显示结果的元素。然后，使用JavaScript获取该元素，修改其innerText属性即可将结果显示给用户。
const result = document.querySelector('#result');
result.innerText = `${year} ${randomInt}`;
这里的result是一个id值为"result"的元素。我们使用querySelector()方法获取该元素，并使用模板字符串将年份和随机数字的结果拼接在一起。最后，我们将结果赋值给result的innerText属性。
完整代码
将之前的获取年份、生成随机4位数字、显示结果的代码整合在一起，就可以得到我们要实现的功能了。
const now = new Date();
const year = now.getFullYear();
const randomInt = Math.floor(Math.random() * 10000);
const result = document.querySelector('#result');
result.innerText = `${year} ${randomInt}`;
总结
在本文中，我们学习了如何获取当前年份、生成随机4位数字，并将它们显示在网页上的方法。这些都是一个Web开发者所需要掌握的基础技能，是我们日常开发工作中经常会用到的。希望大家可以在实践中逐渐熟练掌握这些技巧。