更改颜色定义 - 交通灯脚本 - changing colour definition

因此，我正在尝试在HTML和JavaScript中创建一个脚本，该脚本具有交通信号灯，该交通点在按下按钮时会更改。我已经整理了所有的HTML，但是IF/else语句在我身上播放。

这是它的代码：

<!DOCTYPE html>
<html>
<body>
<table border="10px" style="background-color: #000000">
<tr>
<td width="30px" height="30px" style="background-color: #000000" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #ecec54" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #01db01" id="3"></td>
</tr>
</table>
<p id="temp">1234567890</p>
<button type="button" onclick=changeLights()>Change Lights</button>
</body>
<script>
var lightInfo = ["1","2","3"]
function changeLights() {
	var oneState = document.getElementById(lightInfo[0]).getAttribute("style")
	var twoState = document.getElementById(lightInfo[1]).getAttribute("style")
	var threeState = document.getElementById(lightInfo[2]).getAttribute("style")
	document.getElementById("temp").innerHTML = oneState
	if (oneState === "background-color: #000000") {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#f00000";
	} 
	else {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#000000";
	}
}
</script>
</html>

ps。该段只是一个临时调试。

因此，我希望代码在IF语句中使用每个数据单元使用的十六进制颜色，这些颜色可以将顶光从黑色更改为红色（因为我获得了黑色的十六进制，即＃000000）。但是，当我尝试重复该过程时，红色数据单元格的颜色会以其他一些格式（RGB（240,0,0））出现，这使得IF语句失败和代码中断。有没有AY的方法来确保以十六进制格式给出颜色？

我可能会在这里删除主题，但是为什么不使用CSS类来进行此操作？

eg：有CSS：

.black {
  background-color: #000000;
}
.red {
  background-color: #ff0000;
}
.yellow {
   background-color: #ecec54;
}
.green {
    background-color: #01db01;
 }

并将您的html更新为：

<table border="10px" class="black">
<tr>
<td width="30px" height="30px" class="black" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" class="yellow" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" class="green" id="3"></td>

并将您的JavaScript更新到：

var lightInfo = ["1","2","3"]
function changeLights() {
    var oneState = document.getElementById(lightInfo[0]).className
    var twoState = document.getElementById(lightInfo[1]).className
    var threeState = document.getElementById(lightInfo[2]).className
    document.getElementById("temp").innerHTML = oneState
    if (oneState.indexOf('black') > -1) {
        document.getElementById(lightInfo[0]).className.replace('black','');
        document.getElementById(lightInfo[0]).className += ' red';
    } 
    else {
        document.getElementById(lightInfo[0]).className.replace('red','');
        document.getElementById(lightInfo[0]).className += ' black';
    }
}

这可能是一种更好的方法，例如在更强大的代码中。

因此，如果要在JavaScript中获得hex值，则必须像这样单独函数。但是，解决问题的一种更简单的方法只是指定您的if语句中的黑色hex和rgb。

if (oneState === "background-color: #000000" || oneState === "background-color: rgb(0, 0, 0);") {
  //Do stuff
}

var lightInfo = ["1","2","3"]
function changeLights() {
	var oneState = document.getElementById(lightInfo[0]).getAttribute("style")
	var twoState = document.getElementById(lightInfo[1]).getAttribute("style")
	var threeState = document.getElementById(lightInfo[2]).getAttribute("style")
	document.getElementById("temp").innerHTML = oneState;
	if (oneState === "background-color: #000000" || oneState === "background-color: rgb(0, 0, 0);") {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#FF0000";
	} 
	else {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#000000";
	}
}

<table border="10px" style="background-color: #000000">
<tr>
<td width="30px" height="30px" style="background-color: #000000" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #ecec54" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #01db01" id="3"></td>
</tr>
</table>
<p id="temp">1234567890</p>
<button type="button" onclick=changeLights()>Change Lights</button>

更改颜色定义 - 交通灯脚本

相关内容

最新更新

热门标签：