<!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. Python-requests设置请求的超时时间
			
    使用timeout 参数可以设定等待连接的秒数,如果等待超时,Requests会抛出异常 >>> requests.get('http://github.com', timeout= ...
    
			
    2. 
						
  2. 使用NetBox实现ASP网页封装为EXE教程
			
    简单的形容就是把ASP文件打包 成一个EXE文件,并且不需要在调试的机器上安装IIS即可正常调试.如果按照说明书来操作的话,观看比较繁琐,本人为方便大家使用,现制作一个简单的使用教程. 封装过程 1. ...
    
			
    3. 
						
  3. （转）centos6.5 bind-DNS服务器bind的搭建详解
			
    centos6.5环境DNS-本地DNS服务器bind的搭建 域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库, ...
    
			
    4. 
						
  4. tkinter面板切换
			
    
			
    5. 
						
  5. 12.利用kakatips对网站数据信息监控
			
    网站信息监控 kakatips软件 百度云链接:https://pan.baidu.com/s/1lNH8OGODbIvYeFTjz6kVEQ 密码:5qtz 这是我编辑好的具体详情如下: 有效标记需 ...
    
			
    6. 
						
  6. PHP数据库基于PDO操作类（mysql）
			
    这是网上找的关于Mysql的操作类,非常适合初学者使用 <?php class Mysql { protected static $_dbh = null; //静态属性,所有数据库实例共用,避 ...
    
			
    7. 
						
  7. 微信小程序实例源码大全下载
			
     小程序QQ交流群:131894955  小程序开发直播腾讯课堂:  https://edu.csdn.net/course/detail/6743 微信小程序实例源码大全下载 微信小应用示例代码(p ...
    
			
    8. 
						
  8. Java如何判断当前系统是Windows 还是LInux
			
    
			
    9. 
						
  9. HTML页面禁用Enter键自动提交表单
			
    今天在开发页面时,遇到一个小BUG,,如下图 在页面的文本框获取焦点之后,再按键盘上的Enter键,页面form就会自动提交.如下是页面禁止Enter自动提交代码: document.onkeydow ...
    
			
    10. 
						
  10. JAVA 原子操作类
			
    上文中,guava代码中就用到了,在这里再专门捋一下 部分内容源自: https://www.jianshu.com/p/712681f5aecd https://www.yiibai.com/jav ...
    
			
    11.