Question

首先，我完全理解是否没有人回答这个冗长的问题。我不确定我的项目有多远。我正在尝试构建一个可更改div颜色的程序，而我是javascript新手。我从类似的程序中借了一些代码，但是我无法格式化它以使其适合我的项目。

我尝试过移动javascript并取得了一些成功，但是我真的很努力地学习自己在做错什么。

//js start

var showButton = document.querySelector("#show");
var hideButton = document.querySelector("#hide");

colorBar.style.backgroundColor = "red";

showButton.addEventListener("click", showDiv, false);
hideButton.addEventListener("click", hideDiv, false);


function showDiv(e) {
    colorBar.style.display = "block";
}

function hideDiv(e) {
    colorBar.style.display = "none";
}


var showButton = document.querySelector("#show");
showButton.addEventListener("click", showColorHandler, false);


function showColorHandler(e) {
    var r = parseInt("55");
    var g = parseInt("11");
    var b = parseInt("99");

    container.style.backgroundColor  = "rgb(" + r + "," + g + "," + b + ")";            
}


container.style.backgroundColor = "burlywood";

var showButton = document.querySelector("#show");
var clearButton = document.querySelector("#clear");

showButton.addEventListener("click", showColorHandler, false);
clearButton.addEventListener("click", clearColorHandler, false);

function showColorHandler(e) {
    var r = parseInt("55");
    var g = parseInt("11");
    var b = parseInt("99");

    colorBar.style.backgroundColor  = "rgb(" + r + "," + g + "," + b + ")";         
}

function clearColorHandler(e) {
    clear();
}

function clear() {
    colorBar.style.backgroundColor = "OldLace";
}

var input = document.querySelector("#input");
var button = document.querySelector("#clicker");

button.addEventListener("click", clickHandler, false);

function clickHandler(e) {
    var n = parseInt( input.value );

    // validate the input value
    if ( validate(n)){
        output.innerHTML = "you entered " + n;
    }
    else {
        alert("You must enter a number from 1 to 10!");
    }
}

function validate(n) {
    if ( n < 1 || n > 10) {
        return false;
    } else {
        return true;
    }
}

//js end




//html start


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Color sampler</title>
    <link rel="stylesheet" href="colorStyles.css">

</head>
<body>
    <div id="container">
        <p><strong>Enter a number from 0 to 255:</strong></p>
         <div class = inputArea> <p>Red</p>
        <input type="text" id="input" maxlength="3" size="5" value="55" align="right">
        </div>

        <div class = inputArea>
        <p>Green</p>
        <input type="text" id="input" maxlength="3" size="5" value="11" align="right">
        </div>

        <div class = inputArea>
          <p>Blue</p>
        <input type="text" id="input" maxlength="3" size="5" value="99" align="right">
        </div><br>

        <div id="colorBar"></div>

        <div>
        <button id="show">Show me the color!</button>
        <button id="hide">Hide the color</button><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
        <button id="clear">Reset all</button><br>    
        </div>

     </div>   

      <script src="colorChange.js"></script>


</body>
</html>

//html end

我只希望能够将0到255之间的数字放入三个文本框中，并在单击显示颜色按钮后让颜色栏更改颜色。

Answer 1

我在这里为您做了一个小演示。

此演示的工作方式是我有三个输入：一个用于红色，一个用于蓝色，一个用于绿色。我使用value HTML属性将这些输入设置为从0开始。我的JavaScript中有事件监听器，等待用户更改这些输入。一旦其中之一被更改，我将触发一个函数，该函数获取输入的当前值并从其中创建一个“ rgb（）”字符串。然后，它使用styles.backgroundColor =将此字符串应用于div。这样，用户可以通过更改三个输入来操纵div的颜色。

Here's a silly little website我这样做是为了娱乐。

运行此演示进行尝试：

const div = document.getElementById("div");
const rInput = document.getElementById("r");
const gInput = document.getElementById("g");
const bInput = document.getElementById("b");

document.getElementById("r").addEventListener('change', () => {
  handleInputs();
});
document.getElementById("g").addEventListener('change', () => {
  handleInputs();
});
document.getElementById("b").addEventListener('change', () => {
  handleInputs();
});

function handleInputs() {
  const rVal = rInput.value;
  const gVal = gInput.value;
  const bVal = bInput.value;
  
  const rgbVal = `rgb(${rVal},${gVal},${bVal})`;
  
  div.style.backgroundColor = rgbVal;
}

<input id="r" placeholder="R" type="number" value=0 min="0" max="255" step="1"></input>
<input id="g" placeholder="G" type="number" value=0 min="0" max="255" step="1"></input>
<input id="b" placeholder="B" type="number" value=0 min="0" max="255" step="1"></input>
<div id="div" style="height: 200px; background-color: rgb(0, 0, 0);"></div>

也许看到这个工作示例将使您转向如何将这种类型的想法应用于代码。

如何获取JavaScript以结合三种颜色？

1 个答案: