js点击更换背景颜色或图片的实例代码

2023年6月11日上午5:08 • JavaScript

下面是详细讲解“js点击更换背景颜色或图片的实例代码”的完整攻略，分为以下几个步骤：

步骤1. 创建 HTML 页面

首先创建一个 HTML 页面，可以按照以下示例进行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>更换背景颜色或图片实例代码</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div class="container">
        <h1>点击下面的按钮更换背景颜色或图片</h1>
        <button id="changeColor">更换背景颜色</button>
        <button id="changePic">更换背景图片</button>
    </div>
</body>
</html>

在这个页面中，我们首先引入了 jQuery 库和一个名为 index.js 文件的 JavaScript 文件。在页面中，我们有两个按钮用于更换背景颜色或图片。

步骤2. 创建 JavaScript 文件

接下来，我们创建一个名为 index.js 的文件，用于实现更换背景颜色或图片的功能。示例如下：

$(function() {
  // 给更换颜色按钮绑定事件
  $("#changeColor").click(function() {
    $("body").css("background-color", getRandomColor());
  });

  // 给更换图片按钮绑定事件
  $("#changePic").click(function() {
    var imgURL = "https://picsum.photos/1200/800/?random=" + Math.random();
    $("body").css("background-image", "url('" + imgURL + "')");
  });

  // 获取随机颜色值
  function getRandomColor() {
    var colors = ['red', 'blue', 'green', 'purple', 'pink', 'orange', 'gray'];
    return colors[Math.floor(Math.random() * colors.length)];
  }
});

这个文件中，我们首先使用了 jQuery 的 $(function() {}) 语法，它表示当文档加载完成后执行里面的代码。然后我们使用了 jQuery 选择器获取了两个按钮，并给它们分别绑定了 click 事件。

当更换颜色按钮被点击时，我们调用了一个名为 getRandomColor() 的函数来获取随机颜色值，并将它设置成 body 的背景颜色。当更换图片按钮被点击时，我们调用了一个来获取随机图片地址，并将它设置成 body 的背景图片。