<!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 发起http POST 请求
			
    python requests 发起http POST 请求,带参数,带请求头: #!/usr/bin/env python # -*- coding: utf-8 -*- import reques ...
    
			
    2. 
						
  2. MongoDB Shell 常用操作命令
			
    MonoDB   shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用javascript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help ...
    
			
    3. 
						
  3. dubbo-文档
			
    Srping版Dubbo集成中文地址:https://dubbo.gitbooks.io/dubbo-user-book/content/preface/background.html SpringB ...
    
			
    4. 
						
  4. 【Eclipse】将Tab替换为空格
			
    工作中由于TAB和空格的占位不一样,在比对代码的时候,总是对齐方式不正确. 所以,就网搜了下Tab替换空格的方式,还不错哦,记录下来. 操作如下: 1.点击 window->preference ...
    
			
    5. 
						
  5. oracle 12c ins-30131 执行安装程序验证所需的初始设置失败
			
    
			
    6. 
						
  6. 【Social listening实操】如何运用免费的大数据工具获得行业洞察？
			
    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 当我们想要创业却对市场行情不甚了解,该如何迅速了解市场行情 ...
    
			
    7. 
						
  7. 笔记：Sublime Text 3
			
    http://www.sublimetext.com/3 Sublime Text官网 http://www.sublimetextcn.com/3/ Sublime Text中文官网 http:// ...
    
			
    8. 
						
  8. Android 开发第三步-问题解析
			
    因为这个问题,困扰了好久 最后找到了最根本的问题,当时是因为没有R.java为什么没有? 是因为布局出现了错误,在一篇百度经验中找到了怎样解决 https://jingyan.baidu.com/ar ...
    
			
    9. 
						
  9. 使用MediaPlayer类和SurfaceView来播放视频
			
    MediaPlayer可以播放视频,只需需要SurfaceView的配合,SurfaceView主要用于显示MediaPlayer播放的视频流媒体的画面渲染. SurfaceView是配合MediaP ...
    
			
    10. 
						
  10. python的回调callback
			
    python的回调callback很强大,特别是函数参数可以是kw,因为一个函数编译后对应函数对象,函数对象中包含了参数的信息,当你调用函数时,会判断传入参数是否正确.通过导入模块,可以使用模块中的函 ...
    
			
    11.