<!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. Postman用法，了解一下
			
    一.Postman的基础功能 二.接口请求流程 1. GET 请求 GET请求:点击Params,输入参数及value,可输入多个,即时显示在URL链接上, 所以,GET请求的请求头与请求参数如在接口 ...
    
			
    2. 
						
  2. 重新配置dbconsole的步骤
			
    重新配置dbconsole的步骤emca -repos dropemca -repos createemca -config dbcontrol dbemctl start dbconsole
    
			
    3. 
						
  3. web：频繁刷新浏览器的页面【小工具】
			
    [目的] 频繁刷新某一浏览器页面,小测试一下加载性能,或者打开的文件是否及时关闭,会不会导致服务器奔溃 [小工具] 新建txt,输入以下内容,并保存为html的格式,然后在浏览器中打开,则会定时刷新指 ...
    
			
    4. 
						
  4. 20.纯 CSS 为母亲节创作一颗像素画风格的爱心
			
    原文地址:https://segmentfault.com/a/1190000014837536 感想: 网格grid 又来了: fr : (剩余空间长度)单位, 1.当(50px,nfr),nfr代 ...
    
			
    5. 
						
  5. hive grouping sets 实现原理
			
    先下结论: 看了hive 1.1.0 grouping sets 实现(从源码及执行计划都可以看出与kylin实现不一样),(前提是可累加,如sum函数)他并没有像kylin一样先按照group by ...
    
			
    6. 
						
  6. Android Studio 3.0 新特性
			
    最新Android Studio版本是Android Studio 3.0,本文提供了所有新功能和更改的摘要. 所有这些功能都可以在最新的金丝雀版本中发布,但beta测试版本可能尚未提供. 核心IDE ...
    
			
    7. 
						
  7. Flex学习笔记-时间触发器
			
    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
    
			
    8. 
						
  8. DDD领域驱动设计(例子)
			
    参考:https://tech.meituan.com/DDD_in_%20practice.html
    
			
    9. 
						
  9. jmap dump文件压缩后失效
			
    最近线上出问题,于是用jmap -dump拿到dump文件,再linux压缩后拿到windows下无效,后来又直接拿了一个没有压缩的竟然可以用...坑啊!~
    
			
    10. 
						
  10. PDF文档的目录编辑与显示
			
    为了更好的保护PDF文件,可以将其转换为图片的格式,再重新排版编辑. 使用压缩率更高的JPEG 2000图片格式更佳. ---------------------------------------- ...
    
			
    11.