<!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. jq遍历list和object
			
    <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.l ...
    
			
    2. 
						
  2. LeetCode  1:1. 两数之和
			
    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...
    
			
    3. 
						
  3. fabric-ca1.03安装
			
    前面的文档已经成功的安装了fabric1.0.1的e2e例子.之后代码换成1.0.3版本按步骤重新安装一下,就可以切换到1.0.3了.1.0.3的脚本和启动命令没有变化,还是用的1.0.1的. 1.准 ...
    
			
    4. 
						
  4. mysql 替代Oracle instr
			
    在迁移项目时遇到的,原项目的数据库使用的Oracle,现在要迁移到MySQL中,而项目中用到了Oracle的instr函数,而MySQL只能查找子串是否在父串中,没法按照出现的次数进行查找. 先来介绍 ...
    
			
    5. 
						
  5. 《算法》第六章部分程序 part 8
			
    ▶ 书中第六章部分程序,加上自己补充的代码,包括单纯形法求解线性规划问题 ● 单纯形法求解线性规划问题 // 表上作业法,I 为单位阵,y 为对偶变量,z 为目标函数值 // n m 1 // ┌── ...
    
			
    6. 
						
  6. java abstract构造函数调用
			
    构造函数是对象的基本,没有构造函数就没有对象.如果在父类中(这里就是你的抽象类)中显示的写了有参数的构造函数,在子类继承是就必须写一个构造函数来调用父类的构造函数 public abstract cl ...
    
			
    7. 
						
  7. 11.vim编辑器命令
			
    VI中的多行删除与复制   方法一: 单行删除,:1(待删除行)d 多行删除 ,:1,10d   方法二: 光标所在行,dd 光标所在行以下的N行,Ndd   方法1: 光标放到第6行, 输入:2yy ...
    
			
    8. 
						
  8. [记录] CSS 左边元素定长，右边元素获得剩余长度
			
    情景:左边元素定长,右边元素获得剩余长度 1. 左边设置浮动,右边元素宽度auto,可以不设置,默认auto,然后设置margin-left:左边元素宽度 <ul class="ent ...
    
			
    9. 
						
  9. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql/mysql.sock' (2)
			
    [root@XXX ~]# mysql -h localhost -uroot -p Enter password: ERROR (HY000): Can't connect to local MyS ...
    
			
    10. 
						
  10. ueditor富文本框图片显示
			
    修改config.json /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /*"physicsPath":"E:/Software/apache-tomc ...
    
			
    11.