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 · ...
随机推荐
- Ubuntu启动时a start job is running for dev-disk-by延时解决
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- 主备归档不一致导致的RMAN-08137无法清理归档解决方案
值班夜里接到归档目录满的告警,执行删除脚本发现报错 RMAN-08137: WARNING: archived log not deleted, needed for standby or upstr ...
- python中dict的fromkeys用法
fromkeys是创造一个新的字典.就是事先造好一个空字典和一个列表,fromkeys会接收两个参数,第一个参数为从外部传入的可迭代对象,会将循环取出元素作为字典的key值,另外一个参数是字典的val ...
- input="file" 浏览时只显示指定excel文件,筛选特定文件类型
<p>显示 .xls, .xlsx, .csv 文件...</p> <input type="file" accept=".csv, app ...
- ZedBoard上运行linux系统的准备工作框架
目标:ZedBoard上运行linux系统. 需要什么:图中上色部分. 应该做哪些工作:上色部分之前的所有步骤. 由上图得知,为了顺利在zedboard上构建嵌入式Linux操作系统,我们一般需要如下 ...
- ios 10 新特性
UITextField添加了textContentType枚举,指示文本输入区域所期望的语义意义. 使用此属性可以给键盘和系统信息,关于用户输入的内容的预期的语义意义. 当您提供有关您期望用户在文本输 ...
- 云serverlinux又一次挂载指定文件夹(非扩充)
版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/liuensong/article/details/27548771 新买的香港云server,系统仅仅能在 ...
- PixelRatio使用
export default class PixelRatioView extends Component { render() { return ( <View style={styles.c ...
- 搭建nginx服务器,虚拟主机,反向代理
1 搭建Nginx服务器 1.1 问题 在IP地址为192.168.10. 5的主机上安装部署Nginx服务,并可以将Nginx服务器升级到更高版本,要求编译时启用如下功能: SSL加密功能 查看服务 ...
- wxPython:文本对话框TextEntryDialog
wxTextEntryDialog(wxWindow* parent, const wxString& message, const wxString& caption = " ...