JavaScript实现通过滑块改变网页颜色
更新时间：2021年08月31日 08:46:15 作者：信仰柴神的人
这篇文章主要为大家详细介绍了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数据可视化:ECharts制作地图
- 超详细的JavaScript基本语法规则
- JavaScript中类型的强制转换与隐式转换详解
- JavaScript es6中var、let以及const三者区别案例详解
- JavaScript 中this指向问题案例详解
- JavaScript函数之call、apply以及bind方法案例详解
- 详解JavaScript中Arguments对象用途
- JavaScript CollectGarbage函数案例详解
- JavaScript中BOM和DOM详解
- JavaScript setTimeout与setTimeinterval使用案例详解
- JavaScript定时器实现限时秒杀功能
- JavaScript实现限时秒杀功能
- JavaScript对象(详细)
相关文章
这篇文章主要给大家介绍了js简单粗暴的发布订阅的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
在阅读一些框架的源码时发现了new static(),和new self(),甚是不解,后来查阅资料,才了解了,所以下面这篇文章主要给大家介绍了关于php类中static与self的使用区别的相关资料,需要的朋友可以参考下2021-06-06
本文主要介绍了JavaScript定义简单的页面复选框实现全选操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要给大家分享的是常用的js函数的方法，告别搜索引擎的帮助，提高你的开发效率，,需要的朋友可以参考一下，希望对你的学习有所帮助2021-12-12
这篇文章主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要介绍了微信小程序全局状态的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
本文通过实例代码给大家讲解了js和jquery中的文档加载问题，感兴趣的的朋友一起看看吧2017-08-08
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
这篇文章主要介绍了JS前端面试基本排序算法原理与实现方法,结合实例形式详细分析了JS常见的基本排序算法相关原理、实现方法、时间复杂度及操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了鼠标滑在标题上显示图片的JS代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了fullCalendar日历插件玩法示例解析,包括Fullcalendar安装,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
最新评论