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 · ...
随机推荐
- shell之使用cut切割文本文件
我们知道可以通过工具grep或egrep按行筛选记录,这里我们可以通过cut工具对文本按列进行切分,它可以指定定界符,linux下制表符是默认的定界符. #cut -f 2,3 textfile 这个 ...
- es6/ts for in/ for of
for in 是es6之前就有的循环下标的方式 for of 是typescript的循环对象或者数组中值的方式,但是不能循环普通的对象,需要通过和Object.keys()搭配使用,如果循环普通对象 ...
- weakSelf 运用 strongSelf来解决block的循环引用
SDWebImage 中有一段源码: #if SD_UIKIT Class UIApplicationClass = NSClassFromString(@"UIApplication&qu ...
- 如何实现浏览器向服务器伪造refer?
Request URL:https://www.getwnmp.org/ Request Method:GET Status Code:304 Remote Address:45.55.134.251 ...
- xcode工程编译错误:The maximum number of apps for free development profiles has been reached.
真机调试免费App ID出现的问题The maximum number of apps for free development profiles has been reached.免费应用程序调试最 ...
- [administrative][archlinux][clonezilla][disk cloning] 一块 windows 10 硬盘的备份
https://wiki.archlinux.org/index.php/disk_cloning https://wiki.archlinux.org/index.php/full_system_b ...
- oracle优化:避免全表扫描
http://blog.csdn.net/onetree2010/article/details/6098259
- vue脚手架用axios请求本地数据
首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...
- js禁用页面上右键菜单、选中和复制
有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...
- dedecms标签(tags)页面伪静态设置
我们在创建文章的时候经常会设置一些tags,如果发表文章时关键词没添加的话tags也会自动成为文章的关键词,tags是一个不错的功能,通过关键词链接可以快速寻找到相关内容,但是标签页面的url经常会带 ...