JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript实现通过滑块改变网页颜色

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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实现通过滑块改变网页颜色所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程