当前位置： 首页 > article >正文

如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色

article 2025/6/9 5:01:36

原文：如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色 | w3cschool笔记

（请勿标记为付费！！！！）

在网页开发中，为图片添加动态效果可以显著提升用户体验。今天，我将向大家介绍如何通过 HTML、CSS 和 JavaScript 实现图片颜色的随机更改。这个教程不仅简单易懂，还能帮助你理解前端开发中的交互式设计原理。

方法一：使用 Math.random() 函数

示例代码

<!DOCTYPE html>
<html>
<head><title>随机更改图片颜色 | 编程狮（w3cschool.cn）</title><style>body {overflow: hidden; /* 隐藏溢出内容 */}#container {top: 0;width: 350px;height: 150px;position: absolute; /* 绝对定位 */mix-blend-mode: hue; /* 颜色混合模式 */}img {width: 200px;height: auto; /* 自动调整高度，保持宽高比 */}p {font-size: 20px;font-weight: bold;margin-left: 15px;}</style>
</head>
<body><img src="https://atts.w3cschool.cn/images%2Fw3c%2F20220506-154940.png" alt="示例图片"> <div id="container"></div><p>点击图片更改颜色</p><script>const divElement = document.getElementById("container"); // 获取容器元素function selectcolor() {return Math.floor(Math.random() * 255); // 生成 0 到 255 之间的随机整数}divElement.addEventListener('click', () => { // 添加点击事件监听器divElement.style.backgroundColor = 'rgba('+ selectcolor() + ',' + selectcolor() // 设置随机背景颜色+ ',' + selectcolor() + ')';});</script>
</body>
</html>

将代码复制至 > HTML在线编译器查看效果

代码解析

  1. HTML 部分：
    • 使用 <img> 标签引入图片，并设置相应的 src 属性。
    • 创建一个 <div> 容器，用于应用颜色变化效果。

  1. CSS 部分：
    • 为 body 设置 overflow: hidden，以隐藏可能溢出的内容。
    • 为 #container 设置绝对定位和尺寸，并应用 mix-blend-mode: hue 以实现颜色混合效果。

  1. JavaScript 部分：
    • 使用 Math.random() 生成随机数，并通过 Math.floor() 将其转换为整数。
    • 为容器添加点击事件监听器，点击时随机更改背景颜色。

方法二：使用十六进制颜色代码

示例代码

<!DOCTYPE html>
<html><head><title>随机更改图片颜色 | 编程狮（w3cschool.cn）</title><style>body {background-color: paleturquoise; /* 设置背景颜色 */}.container {width: 75%;height: 100vh;display: flex;justify-content: center;align-items: center;text-align: center;margin: auto;}h3 {font-size: 18px;margin: 10px 20px 20px 10px;color: white;}.btn1 {padding: 2% 2%;border: none;border-radius: 4px;color: teal;font-size: 15px;cursor: pointer;}img {max-width: 100%; /* 图片最大宽度为容器宽度 */height: auto; /* 自动调整高度，保持宽高比 */border: 2px solid white; /* 添加边框 */}p {animation: hexcolors 5s infinite alternate; /* 添加动画效果 */font-size: 20px;font-weight: bold;color: navy;}@keyframes hexcolors { /* 定义动画关键帧 */0% { color: violet; }20% { color: indigo; }40% { color: blue; }60% { color: green; }80% { color: yellow; }100% { color: orangered; }}@media screen and (min-width: 992px) { /* 响应式设计 */.container { width: 100vw; margin: auto; }h2 { font-size: 30px; }.btn1 { padding: 2% 2%; margin: auto; font-size: 20px; font-weight: bold; }}</style></head><body><div class="container"><div><p>点击按钮更改图片颜色。</p><img src="https://atts.w3cschool.cn/images%2Fw3c%2F20220506-154940.png" alt="示例图片"> <!-- 替换为编程狮的图片 --><h3>背景颜色为：# <span id="colorCode">0f5257</span></h3><button onclick="changeColor()" class="btn1">生成颜色</button></div></div><script>function changeColor() {let hexNumbers = [ // 定义十六进制颜色字符数组"0", "1", "2", "3", "4", "5", "6", "7", "8", "9","A", "B", "C", "D", "F"];let hexColorCode = ""; // 初始化颜色代码字符串for (let i = 0; i < 6; i++) { // 循环生成 6 位颜色代码let randomIndex = Math.floor(Math.random() * hexNumbers.length);hexColorCode += hexNumbers[randomIndex];}document.getElementById("colorCode").innerHTML = hexColorCode; // 更新显示的颜色代码document.getElementsByTagName("img")[0].style.background = "#" + hexColorCode; // 应用新颜色}</script></body>
</html>

将代码复制至 > HTML在线编译器查看效果

代码解析

  1. HTML 部分：
    • 使用 <img> 标签引入图片，并设置相应的 src 属性。
    • 创建一个包含文本、图片和按钮的容器，用于展示和交互。

  1. CSS 部分：
    • 为 body 设置背景颜色。
    • 使用 Flexbox 布局使容器居中。
    • 为文本添加动画效果，使用 @keyframes 定义颜色变化的关键帧。

  1. JavaScript 部分：
    • 定义一个包含十六进制颜色字符的数组。
    • 通过循环生成 6 位随机颜色代码。
    • 更新页面上显示的颜色代码，并将新颜色应用到图片背景。

编程狮课程推荐

如果你想更深入地学习 HTML、CSS 和 JavaScript，欢迎访问 编程实战。我们提供以下相关课程：

  • HTML + CSS 基础实战
  • JavaScript 基础实战
  • Bootstrap 前端开发框架
  • jQuery 入门实战
  • 更多实战课程查看编程实战

在编程狮，我们致力于为每一位学习者提供高质量的编程教育资源，帮助你实现从入门到精通的飞跃！

通过今天的教程，你已经学会了如何使用 HTML、CSS 和 JavaScript 实现图片颜色的随机更改。希望你能继续探索并将其应用到你的项目中。

相关文章：

如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色

原文&#xff1a;如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色 | w3cschool笔记 &#xff08;请勿标记为付费&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 在网页开发中&#xff0c;为图片添加动态效果可以显著提升用户体验。今天&#xff0c;我将向…...

编程日记 2025/6/9 5:01:36

html如何在一张图片上的某一个区域做到点击事件

在HTML中&#xff0c;可以通过<map>和<area>标签来实现对图片的某个区域添加点击事件。这种方法通常用于创建图像地图&#xff08;Image Map&#xff09;&#xff0c;允许用户点击图片的不同区域触发不同的事件。 以下是实现步骤和代码示例&#xff1a; 1. 准备图…...

编程日记 2025/6/9 5:00:19

Java数据校验：确保数据完整性和正确性

在软件开发中&#xff0c;数据校验是确保应用程序数据完整性和正确性的关键步骤。Java 提供了多种方式来实现数据校验&#xff0c;从简单的条件检查到复杂的框架支持。在这篇博客中&#xff0c;我们将探讨 Java 中数据校验的重要性、常用的校验注解以及如何整合校验框架来提高代…...

编程日记 2025/6/9 4:59:11

Java-IO流之序列化与反序列化详解

Java-IO流之序列化与反序列化详解 一、序列化与反序列化概述1.1 基本概念1.2 核心接口与类1.3 应用场景 二、Java序列化的基本实现2.1 实现Serializable接口2.2 使用ObjectOutputStream进行序列化2.3 使用ObjectInputStream进行反序列化 三、序列化的高级特性3.1 serialVersion…...

编程日记 2025/6/9 4:58:06

机器学习14-迁移学习

迁移学习学习笔记 一、迁移学习概述 迁移学习是机器学习中的一个重要领域&#xff0c;它旨在解决当目标任务的训练数据有限时&#xff0c;如何利用与目标任务相关但不完全相同的源任务数据来提高学习性能的问题。在现实世界中&#xff0c;获取大量高质量的标注数据往往成本高…...

编程日记 2025/6/9 4:57:00

CAN通信收发测试（USB2CAN模块测试实验）

1.搭建测试环境 电脑&#xff1a;安装 USB 驱动&#xff0c;安装原厂调试工具&#xff0c;安装cangaroo&#xff08;参考安装包的入门教程即可&#xff09; USB驱动路径&#xff1a;~\CAN分析仪资料20230701_Linux\硬件驱动程序 原厂调试工具路径&#xff1a;~\CAN分析仪资料2…...

编程日记 2025/6/9 4:55:56

小白初学SpringBoot记录

1.对于通过json返回用户信息时&#xff0c;需要忽略password字段操作&#xff1a; 1.1 pom配置jackson细节&#xff1a; <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>…...

编程日记 2025/6/9 4:54:50

OSCP备战-BSides-Vancouver-2018-Workshop靶机详细步骤

一、靶机介绍 靶机地址&#xff1a;https://www.vulnhub.com/entry/bsides-vancouver-2018-workshop%2C231/ 靶机难度&#xff1a;中级&#xff08;CTF&#xff09; 靶机发布日期&#xff1a;2018年3月21日 靶机描述&#xff1a; Boot2root挑战旨在创建一个安全的环境&…...

编程日记 2025/6/9 4:53:47

PDF转Markdown/JSON软件MinerU最新1.3.12版整合包下载

MinerU发布至今我已经更新多版整合包了&#xff0c;5天前MinerU发布了第一个正式版1.0.1&#xff0c;并且看到在18小时之前有更新模型文件&#xff0c;我就做了个最新版的一键启动整合包。 2025年02月21日更新v1.1.0版整合包 2025年02月27日更新v1.2.0版整合包 2025-06-05 更…...

编程日记 2025/6/9 4:52:42

Android第十三次面试总结基础

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程日记 2025/6/9 4:51:37

【深入学习Linux】System V共享内存

目录 前言 一、共享内存是什么&#xff1f; 共享内存实现原理 共享内存细节理解 二、接口认识 1.shmget函数——申请共享内存 2.ftok函数——生成key值 再次理解ftok和shmget 1&#xff09;key与shmid的区别与联系 2&#xff09;再理解key 3&#xff09;通过指令查看/释放系统中…...

编程日记 2025/6/9 4:50:28

编程基础：执行流

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 执行流同步&#xff1a;顺序执行&#xff0c;只有一个执行流异步&#xff1a;新开后台(次)执行流&#xff0c;后台执行流要确保不能影响主执行流。共有两个执行流。 阻塞&#xff1a;任务阻塞执行流&#xff0c;导致…...

编程日记 2025/6/9 4:49:21

理解非结构化文档：将 Reducto 解析与 Elasticsearch 结合使用

作者&#xff1a;来自 Elastic Adel Wu 演示如何将 Reducto 的文档处理与 Elasticsearch 集成以实现语义搜索。 Elasticsearch 与业界领先的生成式 AI 工具和提供商有原生集成。欢迎观看我们的网络研讨会&#xff0c;了解如何超越 RAG 基础&#xff0c;或使用 Elastic 向量数据…...

编程日记 2025/6/9 4:47:07

算法训练第十天

232. 用栈实现队列 代码&#xff1a; class MyQueue(object):def __init__(self):self.arr1 []self.arr2 []def push(self, x):""":type x: int:rtype: None"""self.arr1.append(x)def pop(self):""":rtype: int""…...

编程日记 2025/6/9 4:46:04

2种官方方法关闭Windows防火墙

2种官方方法关闭Windows防火墙 引言一、防火墙：你电脑的"智能安检员"二、这些场景，可能需要"临时撤防"三、极速关闭方案方法一：通过系统设置（Win10/11专属通道）方法二：通过传统控制面板（全系统通用：Win7-11全系）四、 必读安全警告（关闭前请三思！…...

编程日记 2025/6/9 4:45:01

[面试精选] 0094. 二叉树的中序遍历

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09; 2. 题目描述 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 3. 题目示例 示例 1 : 输入&…...

编程日记 2025/6/9 4:43:59

股指期货期权交易规则是什么？

本文主要介绍股指期货期权交易规则是什么&#xff1f;股指期货期权是以股指期货合约为标的物的期权交易&#xff0c;其规则结合了期货与期权的特点。 股指期货期权交易规则是什么&#xff1f; 一、基础交易规则 交易时间 交易日9:30-11:30&#xff0c;13:00-15:00&#xff0…...

编程日记 2025/6/9 4:42:57

学习笔记(23): 机器学习之数据预处理Pandas和转换成张量格式[1]

学习笔记(23): 机器学习之数据预处理Pandas和转换成张量格式[1] 学习机器学习&#xff0c;需要学习如何预处理原始数据&#xff0c;这里用到pandas&#xff0c;将原始数据转换为张量格式的数据。 1、安装pandas pip install pandas 2、写入和读取数据 >>创建一个人工…...

编程日记 2025/6/9 4:41:55

2025年6月6日第一轮

2025年6月6日 The rapid in Chiese industdy is developnig e,and it is From be in a enjoy a deep is developing The drone industry in China is developing The drone industy in china develops rapidly and is in a leading position in in the world. The dro…...

编程日记 2025/6/9 4:40:48

记一次运行spark报错

提交spark任务运次报错 06/03 18:27:50 INFO Client: Setting up container launch context for our AM 25/06/03 18:27:50 INFO Client: Setting up the launch environment for our AM container 25/06/03 18:27:50 INFO Client: Preparing resources for our AM container …...

编程日记 2025/6/9 4:39:45

12-Oracle 23ai Vector 使用ONNX模型生成向量嵌入

一、Oracle 23ai Vector Embeddings 核心概念​ 向量嵌入&#xff08;Vector Embeddings&#xff09;​​ -- 将非结构化数据&#xff08;文本/图像&#xff09;转换为数值向量 - - 捕获数据的语义含义而非原始内容 - 示例&#xff1a;"数据库" → [0.24, -0.78, 0.5…...

编程日记 2025/6/9 4:38:32

2. 库的操作

2.1 创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ...] create_specification: [DEFAULT] CHARACTER SET charset_name # 字符集: 存储编码 [DEFAULT] COLLATE collation_name # 校验集: 比较/选择/读…...

编程日记 2025/6/9 4:37:22

pytorch 与 张量的处理

系列文章目录 文章目录 系列文章目录一、Tensor 的裁剪二、Tensor 的索引与数据筛选torch.wheretorch.indicestorch.gathertorch.masked_selecttorch.taketorch.nonzero&#xff08;省略&#xff09; 三、Tensor 的组合与拼接torch.cattorch.stack 四、Tensor的切片chunksplit …...

编程日记 2025/6/9 4:36:09

layer norm和 rms norm 对比

Layer norm # Layer Norm 公式 mean x.mean(dim-1, keepdimTrue) var x.var(dim-1, keepdimTrue) output (x - mean) / sqrt(var eps) * gamma beta特点&#xff1a; 减去均值&#xff08;去中心化&#xff09;除以标准差&#xff08;标准化&#xff09;包含可学习参数 …...

编程日记 2025/6/9 4:34:56

Java高级 | 【实验六】Springboot文件上传和下载

隶属文章&#xff1a;Java高级 | &#xff08;二十二&#xff09;Java常用类库-CSDN博客 系列文章&#xff1a;Java高级 | 【实验一】Springboot安装及测试 |最新-CSDN博客 Java高级 | 【实验二】Springboot 控制器类相关注解知识-CSDN博客 Java高级 | 【实验三】Springboot 静…...

编程日记 2025/6/9 4:33:43

RKNN开发环境搭建1-基于Ubuntu 18.04系统使用Docker安装rknn-toolkit2

目录 写在最前面Docker 方式安装rknn-toolkit2写在最前面 瑞芯微在RKNN的环境搭建方面的资料很多，但是在搭建过程中发现很多问题教程中并未提及，对初学者不友好。所以博主做了这个系列的文章，从开始搭建环境到对于RKNN Model Zoo的示例进行实践，希望能对初学者有帮助。坚持…...

编程日记 2025/6/9 4:32:32

qt使用笔记二：main.cpp详解

Qt中main.cpp文件详解 main.cpp是Qt应用程序的入口文件&#xff0c;包含程序的启动逻辑。下面我将详细解析其结构和功能。 基本结构 一个典型的Qt main.cpp 文件结构如下&#xff1a; #include <QApplication> // 或者 QGuiApplication/QCoreApplication #include &…...

编程日记 2025/6/9 4:31:29

VBA进度条ProgressForm1

上一章《VBA如何使用ProgressBar进度条控件》介绍了ProgressBar控件的使用方法&#xff0c;今天我给大家介绍ProgressForm1进度条的使用方法&#xff0c;ProgressForm1是集成ProgressBar控件和Label控件的窗体&#xff0c;可以同时显示进度条和百分比&#xff0c;如下图&#x…...

编程日记 2025/6/9 4:30:26

行为型设计模式之Interpreter（解释器）

行为型设计模式之Interpreter&#xff08;解释器&#xff09; 前言&#xff1a; 自己的话理解&#xff1a;自定义一个解释器用来校验参数或数据是否合法。 1&#xff09;意图 给定一个语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一个解释器&#xff0c;这个解…...

编程日记 2025/6/9 4:29:22

深入解析 CAS 操作

一、CAS 的本质&#xff1a;硬件级别的乐观锁 CAS&#xff08;Compare-And-Swap&#xff0c;比较并交换&#xff09; 是一种原子操作指令&#xff0c;用于实现对共享变量的无锁并发修改。它是现代多核处理器支持的底层硬件指令&#xff0c;也是构建高效并发数据结构&#xff0…...

编程日记 2025/6/9 4:28:17