随机照片生成器 - JavaScript

本文将介绍如何使用 JavaScript 制作一个随机照片生成器。本程序可以从指定的照片库中，随机获取一张照片，并将其显示在 HTML 页面上。

下面是程序的基本构建流程：

1. 编写 HTML 页面，包含一个图片框和一个按钮；
2. 编写 JavaScript，用于实现照片库的管理，按钮的点击事件以及照片显示；
3. 随机获取一张照片并将其显示在图片框中。

HTML 页面

我们可以在 HTML 页面中，定义一个图片框和一个按钮。图片框用于显示随机取得的照片，按钮用于触发获取操作。

<div id="photo-container">
  <img id="random-photo" src="" alt="random photo">
</div>
<button id="generate-btn">Generate Random Photo</button>

JavaScript 实现

首先，我们需要定义一组照片 URL，用于随机获取其中的一张。

const photoLibrary = [
  'https://picsum.photos/id/237/200/300',
  'https://picsum.photos/id/238/200/300',
  'https://picsum.photos/id/239/200/300',
  'https://picsum.photos/id/240/200/300',
  'https://picsum.photos/id/241/200/300',
  'https://picsum.photos/id/242/200/300',
  'https://picsum.photos/id/243/200/300',
  'https://picsum.photos/id/244/200/300',
  'https://picsum.photos/id/245/200/300',
  'https://picsum.photos/id/246/200/300'
];

接着，我们需要定义一个 JavaScript 函数，用于随机获取一张照片。在这个函数中，我们可以使用 Math.random() 方法生成一个 0 到 1 之间的随机数，然后使用 Math.floor() 方法将其取整，并乘以照片库的长度，得到一个 0 到照片库长度减 1 的整数，用于随机获取一张照片。

function getRandomPhoto() {
  const randomIndex = Math.floor(Math.random() * photoLibrary.length);
  return photoLibrary[randomIndex];
}

现在，我们需要为按钮添加一个点击事件，用于触发获取随机照片的操作。在这个函数中，我们可以调用刚刚定义的 getRandomPhoto() 函数随机获取一张照片，然后将其 URL 设置为图片框的 src 属性。

const generateBtn = document.getElementById('generate-btn');
const randomPhoto = document.getElementById('random-photo');

generateBtn.addEventListener('click', function() {
  const randomPhotoUrl = getRandomPhoto();
  randomPhoto.setAttribute('src', randomPhotoUrl);
});

完整代码片段

下面是完整的 JavaScript 代码片段，包含了照片库的定义、随机获取照片的函数以及按钮点击事件的实现。你可以将其复制到你的项目中使用，记得在 HTML 文件中引入该 JavaScript 文件。

const photoLibrary = [
  'https://picsum.photos/id/237/200/300',
  'https://picsum.photos/id/238/200/300',
  'https://picsum.photos/id/239/200/300',
  'https://picsum.photos/id/240/200/300',
  'https://picsum.photos/id/241/200/300',
  'https://picsum.photos/id/242/200/300',
  'https://picsum.photos/id/243/200/300',
  'https://picsum.photos/id/244/200/300',
  'https://picsum.photos/id/245/200/300',
  'https://picsum.photos/id/246/200/300'
];

function getRandomPhoto() {
  const randomIndex = Math.floor(Math.random() * photoLibrary.length);
  return photoLibrary[randomIndex];
}

const generateBtn = document.getElementById('generate-btn');
const randomPhoto = document.getElementById('random-photo');

generateBtn.addEventListener('click', function() {
  const randomPhotoUrl = getRandomPhoto();
  randomPhoto.setAttribute('src', randomPhotoUrl);
});

总结

本文介绍了如何使用 JavaScript 制作一个随机照片生成器，并提供了完整的代码片段。通过学习本文，你可以掌握随机数生成、HTML 元素修改、事件监听等重要的 JavaScript 技能。