zoukankan      html  css  js  c++  java
  • 在线输入RGB更改背景色

    HTML:

    <!DOCTYPE html>
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>RGB颜色转换</title>
    <script language="javascript">

    function showRGB(obj) {
    // 其中red、green、blue都是输入框对应的name值
    var oRed = obj.red.value;
    var oGreen = obj.green.value
    var oBlue = obj.blue.value;
    //将RGB转换为16进制Hex值,字符串
    oHexcode = "#" + toHex(oRed) + toHex(oGreen) + toHex(oBlue);
    var oDiv = document.getElementById("div");
    // div的背景色=name为hexval输入框的值=16进制背景色的值
    oDiv.style.background = obj.hexval.value = oHexcode;
    }

    function toHex(d) {
    // 如果输入的不是数字
    if (isNaN(d)) {
    d = 0;
    }
    // 16进制转换方法
    var n = new Number(d).toString(16);
    return (n.length == 1 ? "0" + n : n);
    }
    </script>

    </head>

    <body>
    <form style="border: 1px blue solid;">
    <b>请输入RGB颜色值(0 to 255)</b><br>
    Red: <input type="text" name="red" size="5"><br>
    Green: <input type="text" name="green" size="5"><br>
    Blue: <input type="text" name="blue" size="5"><br>
    <button onClick="showRGB(this.parentNode)" type="button">显示Hex #</button>
    Hex值为: <input type="text" name="hexval" size="7">

    </form>
    <div id="div" style="margin: 50px; 200px;height: 200px;border: 1px solid red;"></div>

    </body>

    </html>

    result:

  • 相关阅读:
    计算机编程基础
    css3 压缩及验证工具
    BFC
    【原创】bootstrap框架的学习 第五课
    曼珠沙华
    仓央嘉措
    waiting for spring......
    一天
    21-chttp连接池该取多大
    守护线程会不会执行finally?默认情况new thread怎么样确定守护状态?
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5493207.html
Copyright © 2011-2022 走看看