<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        div{
            width:150px;
            height:150px;
            border:solid black 1px;
            background: #rgb(255,255,255);//初始默认为白色
        　　}
    </style>
</head>

<body>
<div id="d"></div>
红:<input type="range" id="r" min="0" max="255" value="255" onchange="changeColor()"><br>
绿:<input type="range" id="g" min="0" max="255" value="255" onchange="changeColor()"><br>
蓝:<input type="range" id="b" min="0" max="255" value="255" onchange="changeColor()"><br>

<script>
    function changeColor(){
        var r=document.getElementById("r").value;
        var g=document.getElementById("g").value;
        var b=document.getElementById("b").value;
        var div=document.getElementById("d");
        div.style.background="rgb("+r+","+g+","+b+")";
    }
</script>
</body>
</html>

效果图如下图：

												


											
html+js自定义颜色选择器的更多相关文章
	

    
								
  1. js jquery 选择器总结
		
    js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...
    
		
    2. 
						
  2. Js日期选择器并自动加入到输入框中
		
    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
    
		
    3. 
						
  3. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
		
    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
    
		
    4. 
						
  4. 通用js地址选择器
		
    用js实现通用的地址选择器,省份,城市,地区自动关联更新 点击下面查看详细代码: http://runjs.cn/code/s8sqkhcv 关键地址库代码: var addr_arr = new A ...
    
		
    5. 
						
  5. js闭包 选择器 面向对象 事件 操作页面
		
    闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer ...
    
		
    6. 
						
  6. Extjs4 自定义颜色选择器ColorField
		
    使用元素的颜色选择器 Ext.create("Ext.picker.Color",{ renderTo:Ext.getBody(), listeners:{ select:func ...
    
		
    7. 
						
  7. 原生js日历选择器，学习js面向对象开发日历插件
		
    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
    
		
    8. 
						
  8. 改造过的JS颜色选择器
		
    项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/  ...
    
		
    9. 
						
  9. js高级选择器querySelector和querySelectorAll
		
    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. day18包的使用与日志(logging)模块
			
    包的使用与日志(logging)模块1. 什么是包    包就是一个包含有__init__.py文件的文件夹    包本质就是一种模块,即包是用包导入使用的,包内部包含的文件也都是用来被导入使用2 为 ...
    
			
    2. 
						
  2. LeetCode 4. Median of Two Sorted Arrays & 归并排序
			
    Median of Two Sorted Arrays 搜索时间复杂度的时候,看到归并排序比较适合这个题目.中位数直接取即可,所以重点是排序. 再来看看治阶段,我们需要将两个已经有序的子序列合并成一个 ...
    
			
    3. 
						
  3. RDD的分区相关
			
    分区是rdd的一个属性,每个分区是一个迭代器 分区器是决定数据数据如何分区 RDD划分成许多分区分布到集群的节点上,分区的多少涉及对这个RDD进行并行计算的粒度.用户可以获取分区数和设置分区数目,默认 ...
    
			
    4. 
						
  4. Tomcat相关的配置和设置
			
    1.Tomcat环境配置方法见百度文库.略. 2.查看. webapps:所有课执行的WEB项目都放在次目录中 work:此文件保存了所有临时文件,当开发中发现一个程序无法正确执行的时候,就可以考虑将 ...
    
			
    5. 
						
  5. Node 操作 MySQL 数据库
			
    1, 下载 mysql 依赖 => npm -i mysql 2, 写一个核心工具类, 用于获取线程池连接 mysql-util.js // 引入 mysql 数据库连接依赖 const mys ...
    
			
    6. 
						
  6. JS 函数（arguments、箭头函数、bind）
			
    参数 函数内部可用的 arguments 对象来访问函数的实参 注意 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么 arguments 属性的值是最近一次该函数调用时传 ...
    
			
    7. 
						
  7. Linux 磁盘管理（分区、创建文件系统、挂载）
			
    Linux设备文件可以分为两类 b : 按块为单位,随机访问设备(块设备文件)  如:硬盘 c : 按字符为单位,线性设备(字符设备文件)  如:键盘 设备文件位于/dev下 主设备号(major n ...
    
			
    8. 
						
  8. 【转】Intro to ShockBurst/Enhanced ShockBurst
			
    原地址https://devzone.nordicsemi.com/b/blog/posts/intro-to-shockburstenhanced-shockburst Wireless PC ac ...
    
			
    9. 
						
  9. linux系统基础入门
			
    使用工具:源码管理,自动部署,web服务器(linux) linux系统基础入门 1.下载地址 2.本文介绍的是一个基于Ubuntu的开源操作系统 下载优麒麟 Ubuntu是一个广泛应用于个人电脑,云 ...
    
			
    10. 
						
  10. Redis-Desktop-Manager的下载与使用
			
    redis可视化工具 参考 https://blog.csdn.net/Future_LL/article/details/84591057
    
			
    11.