仅当其值为1时,不透明度似乎有效

Question

嘿我正在尝试用一些div元素制作一个颜色选择器,我有一个问题,以了解不透明度.

这是我的HTML:

<form>
    <label for="red">RED</label>
    <input type="range" min="0" max="255" step="1" value="0" id="red" name="red" onchange="changeColors()">
    <label for="green">Green</label>
    <input type="range" min="0" max="255" step="1" value="0" id="green" name="green" onchange="changeColors()">
    <label for="blue">Blue</label>
    <input type="range" min="0" max="255" step="1" value="0" id="blue" name="blue" onchange="changeColors()">
    <label for="opacity">Alpha</label>
    <input type="text" min="0" max="1" step="0.1" value="1" id="opacity" name="opacity" onchange="changeColors()">
</form>
<div id="div"><div>

我目前的剧本:

function changeColors() {
    //get the numbers from the html
    var rd = parseInt(document.getElementById("red").value);
    var gr = parseInt(document.getElementById("green").value);
    var bl = parseInt(document.getElementById("blue").value);
    var op = parseInt(document.getElementById("opacity").value);

    //convert the decimal into hexadecimal

    var rdhex = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16);
    var grhex = (gr < 16) ? "0" + gr.toString(16) : gr.toString(16);
    var blhex = (bl < 16) ? "0" + bl.toString(16) : bl.toString(16);

    //concatenate all hex to ger a color
    var hexcode = "#" + rdhex + grhex + blhex;

    //view the change in the browser
    document.getElementById("div").style.backgroundColor = hexcode;
    //change opacity
    document.getElementById("div").style.opacity = op;
}

该jsBin

正如您所看到的,只有当不透明度为"1"时,我才能看到任何结果.例如,当您尝试将值更改为0.5时,整个图像将消失.

这有什么问题？

Answer 1

你正在解析为int,所以"0.5"将舍入为0.

请改用parseFloat:

parseFloat(document.getElementById("opacity").value);