h5 range应用 透明度+RGB

时间：2021-09-15 23:00:28

透明度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $().ready(function () {

            $("#trange").bind('change',function () {

                var val=$("#trange").val();

                $("#txtRangeValue").val(val);    //赋值

//                透明度设置

//                $("#myDiv").get(0).style.filter="alpha("+val+")";

//                $("#myDiv").get(0).style.opacity=val/100;

                $("#myDiv").css({filter:"alpha("+val+")",opacity:val/100});

            })

        });

    </script>

</head>

<body>

<form>

进度条 <input type="range" id="trange" min="0" max="100" step="1" value="100"/><br/>

范围值:<input type="text" id="txtRangeValue" value="100"/><br />

    <div id="myDiv" style="width:200px;height: 200px;background-color: #4cae4c;">透明度</div>

</form>

</body>

</html>

RGB

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

  /*      function $(id){

            return document.getElementById(id);

        }

        window.onload=function(){

            var elems=document.getElementsByTagName("input");

            for(var i=0;i<elems.length;i++){

                elems[i].addEventListener("change",change_color,false);

            }

            function change_color(){

                var r=$("red").value;

                var g=$("green").value;

                var b=$("blue").value;

                $("myDiv").style.backgroundColor="rgb("+r+","+g+","+b+")";

            }

        }

        */

        $().ready(function () {

            $("input").each(function(i,item){

                $(item).bind("change", function () {

                    var r=$("#red").val();

                    var g=$("#green").val();

                    var b=$("#blue").val();

                    $("#myDiv").css("backgroundColor","rgb("+r+","+g+","+b+")");

                })

            });

        });

    </script>

</head>

<body>

<form>

r <input type="range" id="red" min="0" max="100" step="1" value="255"/><br/>

    g <input type="range" id="green" min="0" max="100" step="1" value="255"/><br/>

    b <input type="range" id="blue" min="0" max="100" step="1" value="255"/><br/>

    <div id="myDiv" style="width:200px;height: 200px;background-color: #4cae4c;">透明度</div>

</form>

<p></p>

</body>

</html>

相关文章