zoukankan      html  css  js  c++  java
  • html+js自定义颜色选择器

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
    div{
    150px;
    height:150px;
    border:solid black 1px;
    background: #rgb(255,255,255);//初始默认为白色
      }
    </style>
    </head>

    <body>
    <div id="d"></div>
    红:<input type="range" id="r" min="0" max="255" value="255" onchange="changeColor()"><br>
    绿:<input type="range" id="g" min="0" max="255" value="255" onchange="changeColor()"><br>
    蓝:<input type="range" id="b" min="0" max="255" value="255" onchange="changeColor()"><br>

    <script>
    function changeColor(){
    var r=document.getElementById("r").value;
    var g=document.getElementById("g").value;
    var b=document.getElementById("b").value;
    var div=document.getElementById("d");
    div.style.background="rgb("+r+","+g+","+b+")";
    }
    </script>
    </body>
    </html>

    效果图如下图:

    
    
  • 相关阅读:
    composer的使用
    tp5短信接口的使用
    PHP序列化与反序列化
    PHP 的oop思想
    php单例模式
    统计图的使用(chart)
    jq的时间插件
    php中Excel操作
    Linux 常用命令
    think cmfx目录结构
  • 原文地址:https://www.cnblogs.com/MrZWJ/p/10004170.html
Copyright © 2011-2022 走看看