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 · ...
随机推荐
- Hive日志(Hive Logging)--hive GettingStarted翻译
Hive uses log4j for logging. By default logs are not emitted to the console by the CLI. The default ...
- kafka集群扩容后的topic分区迁移
https://www.cnblogs.com/honeybee/p/5691921.html kafka集群扩容后,新的broker上面不会数据进入这些节点,也就是说,这些节点是空闲的:它只有在创建 ...
- [dpdk][kni] dpdk kernel network interface
文档:https://doc.dpdk.org/guides/prog_guide/kernel_nic_interface.html 摘要: The KNI kernel loadable modu ...
- 【实战】Docker 入门实战一:ubuntu 和 centos 安装Docker
Docker是什么 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布 ...
- public private protected extends
public公共,加上这个修饰的类或属性,可以在同一个包或者别的包里面访问 private私有的,加上这个修饰的类或属性,只能在同类里访问,同包和别的包不能访问 protected保护,加上这个修饰的 ...
- shiro入门实例,基于ini配置
基于ini或者关系数据库的,其实都是一样的,重要的是思想. # ==================================================================== ...
- 命令行安装kvm虚拟机、桥接网络、用virt-manager管理
宿主机CentOS Linux release 7.2.1511 (Core),内核3.10.0-327.el7.x86_64 1.配置宿主机网络桥接 想让虚拟机有自己的ip且外网可访问,需要在安装虚 ...
- ReentrantLock可重入锁的原理及使用场景
摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果已加锁,则不再重复加锁 a.忽略重复加锁.b.用在界面交互时点击执行较长时间请求操作时,防止多次 ...
- Navicat工具的使用 1
Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库 官网下载:https: ...
- Python3学习之路~6.6 类的继承
Inheritance 继承 面向对象编程 (OOP) 语言的一个主要功能就是“继承”.继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展.通过继承创 ...