关键词

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

下面是详细讲解“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 的背景图片。

步骤3. 测试并优化代码

打开 HTML 页面,测试更换背景颜色或图片的功能是否正常。如果存在问题,我们可以通过调试工具来查看控制台中的错误信息并进行修复。

另外,我们还可以对上面的代码进行优化,例如为 body 添加一个初始的背景颜色,避免在页面加载完成前出现短暂的白屏现象。

body {
    background-color: #f5f5f5;
}

示例说明

以上就是“js 点击更换背景颜色或图片的实例代码”的完整攻略,下面提供两个示例说明:

示例1

在一个介绍艺术品的网站中,我们可以使用更换背景图片的功能,让访问者在不同的艺术品介绍页面中看到不同的精美艺术品。

示例2

在一个餐厅网站中,我们可以使用更换背景颜色的功能,让访问者在不同菜品介绍页面中看到不同的背景颜色,从而提高用户的视觉体验。

本文链接:http://task.lmcjl.com/news/9676.html

展开阅读全文