<!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. properties文件读取
			
    package properties; import java.io.FileInputStream; import java.io.FileNotFoundException; import jav ...
    
			
    2. 
						
  2. mongodb的副本集|备份|恢复备份
			
    复制(副本集) 什么是复制 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性,并可以保证数据的安全性 复制还允许从硬件故障和服务中断中恢复数据 为什么要复制 数据备份 数据灾 ...
    
			
    3. 
						
  3. 【转】netstat 的10个基本用法
			
    5. 获取进程名.进程号以及用户 ID 查看端口和连接的信息时,能查看到它们对应的进程名和进程号对系统管理员来说是非常有帮助的.举个栗子,Apache 的 httpd 服务开启80端口,如果你要查看  ...
    
			
    4. 
						
  4. 重识linux-常见压缩和解压缩命令
			
    重识linux-常见压缩和解压缩命令 1 compress 目前已经很少使用,知道有个  不重点学习 2 gzip和zcat 目前应用最广泛 gzip [-cdtv#] 文件名 zcat 文件名.gz ...
    
			
    5. 
						
  5. http etag
			
    基础知识 1) 什么是”Last-Modified”?          在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性 ...
    
			
    6. 
						
  6. 关于 Glassfish
			
    GlassFish 是一款强健的商业兼容应用服务器,达到产品级质量,可免费用于开发.部署和重新分发.开发者可以免费获得源代码,还可以对代码进行更改 GlassFish 是用于构建 Java EE 5应 ...
    
			
    7. 
						
  7. 关于sql链接超时的问题
			
    也许你会说,我在连接字符串中已经 设置了 Connect Timeout=80000 ,并且数据库中超时连接也是设置的值是一个很大的值.为啥到了30秒,仍然超时了呢??         这是因为:   ...
    
			
    8. 
						
  8. module模块和包
			
    import 和 from 调用 module 目录有calc.py 和  test.py 两个文件 calc.py文件内容: def add(x,z): return x+z def sub(x,z ...
    
			
    9. 
						
  9. Redis  list 数据类型
			
    lpush()先进后出  //从头部加入元素   //栈      lrange 元素集合   0    -1 lpop  从list头部删除元素,并返回删除元素 rpush()先进先出 //从尾部加 ...
    
			
    10. 
						
  10. curator 实现分布式一致性锁
			
    最近准备在项目中引入分布式锁,故而研究基于zookeeper的curator框架. 网上资料不多,自己研究其源码发现,这个框架已经帮我做了很多现成的实现. 下面介绍下锁的实现: 通过源码中Lockin ...
    
			
    11.