JavaScript实现通过滑块改变网页颜色
大家好，今天我在看web前端的HTML时，看到input标签的type属性是range时在页面上显示的是一个滑块，我突发奇想能不能通过滑来改变网页的颜色。现在我和大家分享一下通过滑块来改变网页的颜色。
首先要知道怎么样来表示颜色，颜色的表示有四种方式：
1、用颜色的名称来表示颜色：red,green...等
2、用#加16进制数表示：#FF0000/#F00 红色、#00FF00/#0F0 绿色 ...等
3、用rgb值：rgb(0,0,0) 黑色、rgb(255,255,255) 白色....等
4、用rgba值表示：rgba(0,0,0,0.5) 半透明黑色、rgba(255,0,0,.5) 半透明红色（a值表示透明度）
我用的是rgb值表示颜色的，r值，g值，b值的取值范围都是0~255。
body中滑块的设置：max是最大取值，min是最小取值，step是步进值，这里还有一个value属性默认是取中间值
<body id="box"> <label for="r">r值</label> <input type="range" max="255" min="0" step="1" id="r"> <label for="g">g值</label> <input type="range" max="255" min="0" step="1" id="g"> <label for="b">b值</label> <input type="range" max="255" min="0" step="1" id="b"> </body>
JavaScript：为每个滑块设置change事件，当滑块的值改变时就执行。
<script>
//通过id获取元素的函数
function $(id) {
return document.getElementById(id);
}
//获取每个滑块的值
let r = $('r').value
let g = $('g').value
let b = $('b').value
//通过id获取元素
let box = $('box')
//设置网页背景颜色
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
//为r值的滑块设置事件
$('r').addEventListener("change", function () {
r = this.value;
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
})
//为g值的滑块设置事件
$('g').addEventListener("change", function () {
g = this.value;
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
})
//为b值的滑块设置事件
$('b').addEventListener("change", function () {
b = this.value
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
})
</script>
当然input中也有改变颜色的方法
<input type="color" onchange="document.body.style.backgroundColor=this.value">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript让网页出现渐隐渐显背景颜色的方法
本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript渐隐渐显的背景颜色</title> <style fprolloverstyle>A:hover
-
js实现的网页颜色代码表全集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>网页颜色代码全集</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.0
-
JS实现的网页上的颜色拾色器
使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 for(i=0;i '+ishex(i*17) +' ') document.all['Ltd' + i].num=i } function ishex(which){ return which.toString(16); } document.w
-
JS实现鼠标滑过链接改变网页背景颜色的方法
本文实例讲述了JS实现鼠标滑过链接改变网页背景颜色的方法.分享给大家供大家参考,具体如下: 这个小特效很不错,用链接改变网页背景色,鼠标放上链接文字上,网页背景就会跟着变换,想让你的主页更个性一点的朋友,这个代码一定能用上,其实你可在此基础上修改一下代码,改成鼠标放上文字切换样式表,这样整个网页就变了风格,是不是很实用? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-over-link-cha-bgcolor-demo/ 具体
-
JS实现网页背景颜色与select框中颜色同时变化的方法
本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
-
js随机生成网页背景颜色的方法
本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- color=new A
-
鼠标选择动态改变网页背景颜色的JS代码
采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: 复制代码 代码如下: var hex = new Array(6) hex[0] = "FF"hex[1] = "CC"hex[2] = "99"hex[3] = "66"hex[4] = "33"hex[5] = "00"function display(triple
-
JS实现让访问者自助选择网页文字颜色的方法
本文实例讲述了JS实现让访问者自助选择网页文字颜色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现让访问者自助选择网页的文字颜色</title> <script language="javascript"> <!-- function chColor(c){ document.body.style.color = c; } //--> </script>
-
JavaScript实现更改网页背景与字体颜色的方法
本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法.分享给大家供大家参考.具体分析如下: JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起
-
JS实现的RGB网页颜色在线取色器完整实例
本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me