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

js+css实现颜色选择器

news 2026/3/31 8:03: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

马西奎《电磁场与电磁波》学习记录-第 2 章学前准备-坐标系的深入 + 微分元（dl、dS、dV）

一、正交坐标系的一般概念1. 什么是正交曲线坐标系三组坐标面互相垂直正交单位矢量处处正交&#xff1a;​⊥​⊥​直角、圆柱、球坐标都属于这一类。2. 坐标变量与拉梅系数&#xff08;度量系数&#xff09;对一般正交曲线坐标 (,​,​)&#xff1a;坐标面&#xff1a;​常数、…...

编程新知 2026/3/31 6:52:58

推理神器Phi-4-mini-reasoning实测：解方程、逻辑题一键生成答案

推理神器Phi-4-mini-reasoning实测&#xff1a;解方程、逻辑题一键生成答案 1. 模型介绍与核心能力 Phi-4-mini-reasoning是一款专注于逻辑推理和数学计算的轻量级AI模型。与通用聊天模型不同&#xff0c;它被专门设计用于处理需要分步推理的任务&#xff0c;能够将复杂的解题…...

编程新知 2026/3/31 5:58:31

避坑指南：libvirt远程连接配置全解析（SSH/TCP实战演示）

避坑指南&#xff1a;libvirt远程连接配置全解析&#xff08;SSH/TCP实战演示&#xff09; 虚拟化技术在现代数据中心和云计算环境中扮演着核心角色&#xff0c;而libvirt作为开源虚拟化管理工具的事实标准&#xff0c;其远程管理能力直接决定了运维效率。本文将深入剖析libvir…...

编程新知 2026/3/31 5:44:26

Port-Hamiltonian建模在ROS2中的实战：用Python实现双机器人能量交换仿真

Port-Hamiltonian建模在ROS2中的实战&#xff1a;用Python实现双机器人能量交换仿真 当两个机器人在协作搬运物体时&#xff0c;它们的能量如何通过接触点传递&#xff1f;当一群无人机编队飞行时&#xff0c;如何数学描述它们之间无形的能量交互&#xff1f;这正是Port-Hamilt…...

编程新知 2026/3/31 5:22:11

nfc-list使用教程

nfc-list 是 Kali Linux 中基于 libnfc 库&#xff08;开源 NFC 开发框架&#xff09;的基础 NFC/RFID 设备检测工具&#xff0c;核心功能是扫描并列出当前连接的 NFC 读卡器设备&#xff0c;以及贴近读卡器的 NFC 卡片&#xff08;或标签&#xff09;的详细信息&#xff0c;包…...

编程新知 2026/3/31 3:52:50

Sentaurus实战解析：SiC NMOS仿真中的关键参数设置与优化

1. SiC NMOS仿真基础与Sentaurus环境搭建 碳化硅(SiC)功率器件因其优异的耐高温、高压特性&#xff0c;正在电力电子领域掀起一场革命。作为第三代半导体材料的代表&#xff0c;SiC的临界击穿电场强度达到硅的10倍&#xff0c;热导率更是硅的3倍。但在实际器件开发中&#xff0…...

编程新知 2026/3/31 3:40:41

Vue3+Cesium实战：解决404报错与Webpack配置优化指南

1. 为什么你的Cesium地图总是加载失败&#xff1f; 第一次在Vue3项目里集成Cesium时&#xff0c;我也被那些莫名其妙的404报错搞得焦头烂额。明明按照文档配置了&#xff0c;地图就是不显示&#xff0c;控制台一片红。后来才发现&#xff0c;90%的问题都出在资源路径配置上。 C…...

编程新知 2026/3/31 3:28:30

AI万能分类器零基础入门：5分钟搭建无需训练的文本分类系统

AI万能分类器零基础入门&#xff1a;5分钟搭建无需训练的文本分类系统 1. 引言&#xff1a;为什么选择零样本分类&#xff1f; 想象一下这样的场景&#xff1a;你刚接手一个新项目&#xff0c;需要快速对大量用户反馈进行分类。传统方法要求你收集数据、标注样本、训练模型&a…...

编程新知 2026/3/31 2:58:11

BilibiliDown终极指南：三步搞定B站视频下载，支持批量收藏夹与UP主作品

BilibiliDown终极指南&#xff1a;三步搞定B站视频下载&#xff0c;支持批量收藏夹与UP主作品 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https:…...

编程新知 2026/3/31 1:55:20

差分信号技术全景解析：从LVDS到SLVS-EC的工业与移动应用实战

1. 差分信号技术基础&#xff1a;为什么工业与移动设备都爱用它&#xff1f; 第一次接触差分信号是在十年前调试工业PLC背板时&#xff0c;当时单端信号在3米长的背板上频繁出现误码&#xff0c;换成LVDS后问题立刻消失。这种"用两条线传输一个信号"的技术&#xff0…...

编程新知 2026/3/31 0:14:37