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

js+css实现颜色选择器

news 2026/2/11 4:14:08 
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>颜色选择器</title><style>.color-box {width: 50px;height: 50px;border: 1px solid #000;cursor: pointer;}</style>
</head>
<body><div class="color-box"></div><input type="text" id="color-value" placeholder="选中的颜色值" readonly><button onclick="submitColor()">提交</button><script>var colorBox = document.querySelector('.color-box');var colorValue = document.querySelector('#color-value');colorBox.addEventListener('click', function() {var color = prompt('请选择颜色：');if (color) {colorBox.style.backgroundColor = color;colorValue.value = color;}});function submitColor() {var color = colorValue.value;fetch('/submit-color', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ color: color })}).then(response => {if (response.ok) {console.log('颜色已提交');} else {console.error('颜色提交失败');}}).catch(error => {console.error('请求出错:', error);});}</script>
</body>
</html>

在这个示例中，我们创建了一个简单的颜色选择器页面。

首先，在<head>标签中，我们设置了网页的字符编码为UTF-8，以确保中文字符正常显示。

接下来，在<body>标签中，我们创建了一个颜色框(color-box)和一个文本输入框(color-value)，用于显示选中的颜色值。

通过CSS样式，我们设置了颜色框的样式，包括宽度、高度和边框等。

通过JavaScript，我们使用querySelector方法获取了颜色框和颜色值输入框的引用，并为颜色框添加了点击事件监听器。当点击颜色框时，会弹出一个提示框，让用户输入颜色值。如果用户输入了颜色值，就将颜色框的背景颜色设置为用户输入的颜色，并将颜色值显示在文本输入框中。

另外，我们还添加了一个提交按钮，并为其绑定了onclick事件处理函数submitColor。

当用户点击提交按钮时，submitColor函数会获取颜色值输入框中的值，并使用Fetch API将选中的颜色值发送到后端接口/submit-color。在发送请求时，我们将颜色值包装在一个JSON对象中，并设置请求头的Content-Type为application/json。

在后端接收到颜色值后，你可以根据自己的需要进行相应的处理。

请注意，这个示例中的后端接口地址/submit-color是一个示例地址，你需要根据自己的后端实际情况进行修改。

相关文章：

js+css实现颜色选择器

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>颜色选择器</title><style>.color-box {width: 50px;height: 50px;border: 1px solid #000;cursor: pointer;}</style> </head> <body><…...

编程日记 2023/12/30 15:21:58

Go语言中的包管理工具之Go Modules的使用

GoLang 中常用的包管理的方式 常用的有三种 Go PathGo VendorGo Modules 关于 Go Modules 1 ) 概述 Go的包管理&#xff0c;经过社区和官方的共同努力下&#xff0c;最终在百家争鸣后Go官方在 2018.8 推出了go 1.11版本中的Go Modules&#xff0c;并且很快成为一统江湖的包…...

编程日记 2023/12/30 15:20:57

【c/c++】指针例图基础详解

文章目录 指针变量内存指针详解例1例2练习&答案解析 指针变量内存 int main(){// 各类型变量占字节数printf("char: %d\n",sizeof(char)); // 1printf("short: %d\n",sizeof(short)); // 2printf("int: %d\n",sizeof(int)); // 4pri…...

编程日记 2023/12/30 15:13:50

TCP/IP的网络层（即IP层）之IP地址和网络掩码，在视频监控系统中的配置和应用

在给客户讲解我们的AS-V1000视频监控平台的时候&#xff0c;有的客户经常会配置错误IP地址的掩码和网关&#xff0c;导致出现一些网路问题。而在视频监控系统中&#xff0c;IP地址和子网掩码是用于标识网络中设备的重要标识符。IP地址被用来唯一地标识一个网络设备&#xff0c;…...

编程日记 2023/12/30 15:08:45

代码随想录刷题 | Day1

今日学习目标 一、基础 数组 array类 模板类vector 数组是存放在连续内存空间上的相同类型数据的集合。 数组可以方便的通过下标索引的方式获取到下标下对应的数据。 需要两点注意的是 数组下标都是从0开始的。 数组内存空间的地址是连续的 而且大家如果使用C的话&…...

编程日记 2023/12/30 15:07:44

查看IOS游戏FPS

摘要 本篇技术博客将介绍如何使用克魔助手工具来查看iOS游戏的帧率&#xff08;FPS&#xff09;。通过克魔助手&#xff0c;开发者可以轻松监测游戏性能&#xff0c;以提升用户体验和游戏质量。 引言 在iOS游戏开发过程中&#xff0c;了解游戏的帧率对于优化游戏性能至关重要…...

编程日记 2023/12/30 15:05:42

挑战Python100题(7)

100+ Python challenging programming exercises 7 Question 61 Print a unicode string "hello world". Hints: Use ustrings format to define unicode string. 打印一个unicode字符串“helloworld”。 提示：使用u“字符串”格式定义unicode字符串。 Solution…...

编程日记 2023/12/30 15:02:39

HarmonyOS自学-Day4(TodoList案例)

目录 文章声明⭐⭐⭐让我们开始今天的学习吧&#xff01;TodoList小案例 文章声明⭐⭐⭐ 该文章为我&#xff08;有编程语言基础&#xff0c;非编程小白&#xff09;的 HarmonyOS自学笔记&#xff0c;此类文章笔记我会默认大家都学过前端相关的知识知识来源为 HarmonyOS官方文…...

编程日记 2023/12/30 14:56:33

LTPI协议的理解——2、LTPI实现的底层架构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 LTPI协议的理解——2、LTPI实现的底层架构 前言一、体系结构三、实现细节四、物理接口信号传输方法总结 前言 前面讲了LTPI的定义和大概结构&#xff0c;接下来继续理解LTPI…...

编程日记 2023/12/30 14:52:29

CentOS 8.2 安装 Mysql 5.7.26（单机）

Mysql二进制包: mysql-5.7.26-linux-glibc2.12-x86_64.tar.gz 1、卸载旧环境 rpm -qa|grep mysql rpm -qa|grep mariadb rpm -e XXX.rpm --nodeps # 强制卸载rpm包 rm -rf /etc/my.cnf rm -rf /etc/mysql rm -rf /usr/local/mysql 2、安装依赖包 yum -y install libaio yum…...

编程日记 2023/12/30 14:51:28

Vue Tinymce富文本组件自定义带下拉框的操作按钮

想实现如下效果 首先在init方法中的props&#xff0c;toolbar属性增加一个自定义按钮 增加一个setup方法 代码 setup: function(editor) { editor.ui.registry.addSplitButton(myDateButton, {text: 日期时间,onAction: (_) > editor.insertContent(getJsMonthDay(getNowDat…...

编程日记 2023/12/30 14:49:25

YOLOv5算法进阶改进（10）— 更换主干网络之MobileViTv3 | 轻量化Backbone

前言：Hello大家好，我是小哥谈。MobileViTv3是一种改进的模型架构，用于图像分类任务。它是在MobileViTv1和MobileViTv2的基础上进行改进的，通过引入新的模块和优化网络结构来提高性能。本节课就给大家介绍一下如何在主干网络中引入MobileViTv3网络结构，希望大家学习之后能够…...

编程日记 2023/12/30 14:47:22

Java UDP

接收方 创建DatagramSocket实例并指定端口。创建DatagramPacket实例接收信息。调用DatagramSocket的receive()方法将接收信息并传递给DatagramPacket。通过DatagramPacket的getData()方法获取信息内容&#xff0c;getLength()方法获取长度。 package io.github.jast90.udp;im…...

编程日记 2023/12/30 14:41:18

Halcon阈值处理的几种分割方法threshold/auto_threshold/binary_threshold/dyn_threshold

Halcon阈值处理的几种分割方法 文章目录 Halcon阈值处理的几种分割方法1. 全局阈值2. 基于直方图的自动阈值分割方法3. 自动全局阈值分割方法4. 局部阈值分割方法5. var_threshold算子6 . char_threshold 算子7. dual_threshold算子 在场景中选择物体或特征是图像测量或识别的重…...

编程日记 2023/12/30 14:34:00

FB混合C语言编译

这是群友分享的方法&#xff0c;这里只是作为记录和分享。 有了这个功能&#xff0c;可以很方便的拷贝一下C或者C代码直接用到FB上。 既然是混合C语言编译&#xff0c;当然得有C的代码。比如随便去网上找两个排序&#xff1a;冒泡排序和选择排序&#xff0c;代码如下&#xf…...

编程日记 2023/12/30 14:32:59

【机器学习】深度学习概论（二）

五、受限玻尔兹曼机&#xff08;Restricted Boltzmann Machine&#xff0c;RBM&#xff09; 5.1 RBM介绍 示例代码&#xff1a; Python 编写了一个简单的 RBM 实现&#xff0c;并用一些假数据训练了它。然后&#xff0c;他展示了如何用 RBM 来解释用户的电影偏好&#xff0c;以…...

编程日记 2023/12/30 14:31:58

词法语法语义分析程序设计及实现，包含出错提示和错误恢复

词法说明 (1)关键字 main, int, char, if, else, for, while, void (2)运算符 - * / < < > > ! (3)界符 ; ( ) { } (4)标识符 ID letter(letter|digit)* (5)整型常数 NUM digit digit* (6)空格 ‘ ‘ ‘\n’ ‘\r’ ‘\t’ 空格用来分隔ID,NUM,运算符,界…...

编程日记 2023/12/30 14:28:56

Linux的capability深入分析

from:https://www.cnblogs.com/iamfy/archive/2012/09/20/2694977.html 一)概述: 1)从2.1版开始,Linux内核有了能力(capability)的概念,即它打破了UNIX/LINUX操作系统中超级用户/普通用户的概念,由普通用户也可以做只有超级用户可以完成的工作. 2)capability可以作用在进程上…...

编程日记 2023/12/30 14:27:55

【自然语言处理】类似GPT的模型

除了GPT (Generative Pre-trained Transformer) 之外&#xff0c;还有一些其他的好用的类似工具可以用来生成文本。以下是几个受欢迎的工具&#xff1a; BERT (Bidirectional Encoder Representations from Transformers): BERT 是一个预训练的深度双向 Transformer 模型&#…...

编程日记 2023/12/30 14:26:54

【Unity】【FBX】如何将FBX模型导入Unity

【背景】 网上能够找到不少不错的FBX模型资源&#xff0c;大大加速游戏开发时间。如何将这些FBX导入Unity呢&#xff1f; 【步骤】 打开Unity项目文件&#xff0c;进入场景。 点击Projects面板&#xff0c;右键选择Import New Assets 选中FBX文件后导入。Assets文件夹中就会…...

编程日记 2023/12/30 14:25:53

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14