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:

  • 相关阅读:
    关于AFNetworking访问网络超时的设置
    【iOS程序启动与运转】- RunLoop个人小结
    iOS开发中常用到的加密方式
    iOS开发路线简述
    iOS中多线程的实现方案
    HTTP原理
    浅析无线定位技术
    iOS-MVVM设计模式
    打造强大的BaseModel(1):让Model自我描述
    介绍一个基于jQuery的Cookie操作插件
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5493207.html
Copyright © 2011-2022 走看看