input 滑块功能range javascript方法使用


<script>
var rangelist=document.querySelectorAll('[type="range"]');
for(var i=0; i<rangelist.length; i++){
//获得当期遍历的值i并赋值给range
var range=rangelist[i];
range.onchange=function(){ //range.onchange= 当input的值发生改变时触发事件
//onchange()事件一般用于用户表单中,例如:当文本框内容发生改变时触发的事件,或者下拉列表框内容发生改变时触发的事件等
this.nextElementSibling.innerHTML=this.value;
//修改#BOX的背景颜色
changeBoxBG(); //事件监听名
};
};
function changeBoxBG(){ //被监听事件方法属性
var R=red.value;
var G=green.value;
var B=blue.value;
box.style.backgroundColor=`RGB(${R},${G},${B})`;
}
</script>
input 滑块功能range javascript方法使用的更多相关文章
- 在Excel中使用频率最高的函数的功能和使用方法
在Excel中使用频率最高的函数的功能和使用方法,按字母排序: 1.ABS函数 函数名称:ABS 主要功能:求出相应数字的绝对值. 使用格式:ABS(number) 参数说明:number代表需要求绝 ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 节点插入--对比jQuery和JavaScript方法(一)
二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...
- 关于金蝶k3 wise供应生门户登陆界面屏蔽业务账套多余功能模块设置方法
关于金蝶k3 wise供应生门户登陆界面屏蔽业务账套多余功能模块设置方法 1. 找到以下路径 ...\Kingdee\K3ERP\KDHR\SITEFILE\WEBUI\ 找到“Login.aspx” ...
- input事件在进行模糊搜索时,用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)
做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...
- primace 5.0软件的Debug ware 功能的使用方法简介
用primace 软件已经一年多了,一直不知道Debug ware 软件怎么使用,上周终于逮住FAE请教了下这个功能的使用方法.发现这个功能和signalTap ii 原理不一样,这个是非时事的波形, ...
- duilib中控件拖拽功能的实现方法(附源码)
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...
- Android中通过WebView控件实现与JavaScript方法相互调用的地图应用
在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...
- Format类及其子类功能和使用方法具体解释
Format类及其子类功能和使用方法具体解释 1. Format类结构: · java.lang.Object · java.text.Format · ...
随机推荐
- day12:装饰器的进阶
1,三元运算符:变量 = 条件返回True的结果 if 条件 else 条件返回false的结果:必须要有结果:必须要有if和else,只能是简单的情况. 2,传参包起来,星号打散 def outer ...
- Java 输入/输出——处理流(RandomAccessFile)
RandomAccessFile是Java输入/输出流体系中功能最丰富的文件内容访问类,它提供了众多的方法来访问文件内容,它既可以读取文件内容,也可以向文件输出数据.与普通的输入/输出流不同的是,Ra ...
- [development][tcp/ip][ids] 一个简单有参考价值的库 libnids
libhtp 中的例子, 可以通过libnids快速使用. 或者可以快速的写个sniffer. 支持三个功能 ip分片重组, tcp乱序重排, 端口扫描发现. 工程: https://github.c ...
- [apr] Apache Portable Runtime
接手新项目,前任大量的使用了APR,虽然不影响理解主逻辑,但是看见一行不知道干嘛的代码,总是特别炸眼. 况且,虽然我从来不跨平台.但是APR如此优秀,学习理解它都不是浪费时间. 可是让人崩溃的是,竟然 ...
- Flash片头loading与MovieClipLoader
//创建侦听器,侦听是否加载完成 var loader = new MovieClipLoader(); loader.onLoadComplete = function(obj) { if(obj ...
- LeetCode 669 Trim a Binary Search Tree 解题报告
题目要求 Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so t ...
- LeetCode 657 Robot Return to Origin 解题报告
题目要求 There is a robot starting at position (0, 0), the origin, on a 2D plane. Given a sequence of it ...
- 20180318 一个VS2015运行DataTable问题
1. 环境VS 2015 社区版,使用"DataTable" 为了即使查看DataTable中的数据,点击放大镜 ,加载提示错误. 解决方案: 第一步: 第二步: “选项” -- ...
- node学习系列 搭建express
搭建express express官网API http://expressjs.com/zh-cn/ 1.在文件夹下新建一个packages.json文件 内容为: {} 然后执行 yarn add ...
- vue.js安装问题
1.安装:npm install --global vue-cli 2.创建项目:vue init webpack my-project npm WARN deprecated browserslis ...