Mozilla浏览器错误
Mozilla浏览器错误
提问于 2017-01-29 13:28:35
我正在尝试使用javascript创建一个游戏，但在此过程中我发现了firefox中的一个bug。游戏很简单。您应该猜到RGB十六进制码是什么颜色。有6个方框，你应该点击这个方框，如果错误或正确，它会发出警告。这款游戏在chrome，IE，Opera中运行良好，但在mozilla firefox中不起作用。我做了一个警告来调试它，firefox为它添加了一些内联样式。请看下面的屏幕截图和代码。希望你能帮助我在firefox中解决这个问题。提前感谢
FIREFOX SCREENSHOT PROBLEM CHROME SCREENSHOT NO PROBLEM
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<style type="text/css">
body{
background-color: #232323;
}
h1 {
color:#fff;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<h1>Guess what color is<span id="colorDisplay">RGB</span>
<br/>
Click the box to know what color it is.
</h1>
<div id="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
<script type="text/javascript">
var colors = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
];
var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i=0; i<squares.length; i++){
//add initial colors to square
squares[i].style.background = colors[i];
//add click listener to square
squares[i].addEventListener("click",function(){
var clickedColor = this.style.background;
alert(clickedColor);
if (clickedColor === pickedColor){
alert("Correct");
} else{
alert("Wrong");
}
});
}
</script>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-01-29 13:37:08
尝试使用backgroundColor属性而不是background速记：
var colors = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
];
var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i=0; i<squares.length; i++){
//add initial colors to square
squares[i].style.background = colors[i];
//add click listener to square
squares[i].addEventListener("click",function(){
var clickedColor = this.style.backgroundColor;
alert(clickedColor);
if (clickedColor === pickedColor){
alert("Correct");
} else{
alert("Wrong");
}
});
}Stack Overflow用户
发布于 2017-01-29 13:38:33
不是Firefox的bug。您应该指定backgroundColor，否则它将检索颜色加上no-repeat scroll等。
这是可行的：
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<style type="text/css">
body{
background-color: #232323;
}
h1 {
color:#fff;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<h1>Guess what color is<span id="colorDisplay">RGB</span>
<br/>
Click the box to know what color it is.
</h1>
<div id="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
<script type="text/javascript">
var colors = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
];
var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i=0; i<squares.length; i++){
//add initial colors to square
squares[i].style.background = colors[i];
//add click listener to square
squares[i].addEventListener("click",function(){
var clickedColor = String(this.style.backgroundColor);
alert(clickedColor);
if (clickedColor === pickedColor){
alert("Correct");
} else{
alert("Wrong");
}
});
}
</script>
</body>
</html>
Stack Overflow用户
发布于 2017-01-29 13:38:50
据我所知，这与背景有关。无重复滚动通常是与背景相关的属性。Andres注释的上述代码应该会对您有所帮助。祝好运。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41917917
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号