利用range表单元素实现调色板

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="content-type" content="text/html" charset="utf-8"/><title>自定义调色器</title><style>div{float:left;width:200px;height:200px;border:1px solid #ddd;}</style><script>function $(id){return document.getElementById(id);}function color_change(){var r=$("txtRangeRed").value;var g=$("txtRangeGreen").value;var b=$("txtRangeBlue").value;    var color="rgb("+r+","+g+","+b+")";$("color").style.backgroundColor=color;}</script>
</head>
<body><div><form name="frm"><br>R:0<input type="range" min="0" max="255" step="1" value="0" id="txtRangeRed" onchange="color_change()">255<br><br>G:0<input type="range" min="0" max="255" step="1" value="0" id="txtRangeGreen" onchange="color_change()">255<br><br>B:0<input type="range" min="0" max="255" step="1" value="0" id="txtRangeBlue" onchange="color_change()">255</form></div><div id="color"></div>
</body>
</html>

转载于:https://www.cnblogs.com/ljxahjh100/p/6745226.html

利用range表单元素实现调色板相关推荐

html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...
(总结1)HTML5中新增加的表单元素
HTML5中新增加了很多元素标签使用,在经过了近一星期多的学习之后现在进行一下总结,方便日后查阅: H5中的智能表单 1 <form action=""> 2 < ...
087_html5表单元素
1. html5的新的表单元素: 1.1. html5拥有若干涉及表单的元素和属性. 1.2. 本章介绍以下新的表单元素: datalist keygen output 2. datalist元素 2 ...
html 复选框name值,HTML(5)表单元素以及对各个表单元素的name、value属性的理解
我在学习表单元素的时候感觉很混乱,特别是 name value这两个属性,没有真正理解它们是干什么的,所以需要梳理一下. HTML表单元素主要有 HTML5新增的表单元素有三个下面梳理一下这些表单元 ...
HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
table中加表单元素怎么验证_el-table嵌入表单元素注意事项（验证规则prop写法与数据初始化）...
场景:在el-table表格中嵌入表单元素绑定数据: table : :data="planFormData.allocationPlan" el-form-item: v-mo ...
html表单灰色字,灰色HTML表单元素
我想让用户选择一个"行"用于提交报告类型的请求.如何将单选按钮放在表格的第一列中,并且选择哪一个是通过提交按钮发送到下一页的活动行?灰色HTML表单元素 Please select ...

利用range表单元素实现调色板

利用range表单元素实现调色板相关推荐

最新文章

热门文章