JS如何实现不同的数值展现不同的图片？

2024-12-19 10:07:08 JS 979

实现不同数值展现不同图片的详细步骤

在JavaScript中，可以通过条件判断来实现根据不同的数值显示不同的图片。以下是详细的实现步骤：

准备HTML文件：

创建一个HTML文件，并在其中添加一个用于展示图片的<img>标签。
添加一个用于输入数值的<input>标签和一个按钮来触发图片显示。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Image Based on Number</title>
</head>
<body>
    <input type="number" id="numberInput" placeholder="Enter a number">
    <button onclick="showImage()">Show Image</button>
    <br><br>
    <img id="displayImage" src="" alt="Image will be displayed here" style="max-width: 100%; height: auto;">
    <script src="script.js"></script>
</body>
</html>

准备JavaScript文件（script.js）：

在JavaScript文件中，编写一个函数showImage()来根据输入的数值改变图片的显示。

javascript
function showImage() {
    // 获取输入的数值
    var number = document.getElementById("numberInput").value;
    // 获取用于展示图片的<img>标签
    var imageElement = document.getElementById("displayImage");

    // 根据数值选择不同的图片
    if (number == 1) {
        imageElement.src = "image1.jpg";
        imageElement.alt = "Image 1";
    } else if (number == 2) {
        imageElement.src = "image2.jpg";
        imageElement.alt = "Image 2";
    } else if (number == 3) {
        imageElement.src = "image3.jpg";
        imageElement.alt = "Image 3";
    } else {
        // 如果数值不在预定范围内，显示默认图片或提示
        imageElement.src = "default.jpg";
        imageElement.alt = "Default Image";
    }
}

添加图片资源：
- 确保在项目目录中有对应的图片文件，如image1.jpg、image2.jpg、image3.jpg和default.jpg。

工作原理

HTML部分：
- input标签用于用户输入数值。
- button标签设置了点击事件，通过onclick属性调用showImage()函数。
- img标签用于展示图片，通过更改其src属性来显示不同的图片。
JavaScript部分：
- showImage()函数首先获取用户输入的数值。
- 使用if...else if...else结构，根据不同的数值设置img标签的src属性，达到显示不同图片的效果。

通过上述步骤，您可以实现一个简单的根据数值展示不同图片的功能。

关键字

JavaScript，数值，显示图片，条件判断，HTML，input，button，img，src属性