将图像添加到我的阵列？

时间：2017-05-30 06:49:01

标签： javascript html css arrays

我想知道是否有任何方法可以将图像添加到我的老虎机阵列中？现在我刚刚能够在数组中添加数字。

到目前为止我得到了这个，我知道我的阵列中只有一个选择，它是故意的：

＆＃13;
＆＃13; 
var arr = ["#7.png"];

// var arr = [5];
var credits = 10;

function freezeCheck() {
  if (document.getElementById("hold1").checked == true || document.getElementById("hold2").checked == true || document.getElementById("hold3").checked == true) {
    // if any is checked, freeze hold buttons.
    document.getElementById("hold1").checked = false;
    document.getElementById("hold2").checked = false;
    document.getElementById("hold3").checked = false;

    document.getElementById("hold1").disabled = true;
    document.getElementById("hold2").disabled = true;
    document.getElementById("hold3").disabled = true;
  } else if (document.getElementById("hold1").disabled == true) {
    // if any diabled, enable (unfreeze) all hold buttons.
    document.getElementById("hold1").disabled = false;
    document.getElementById("hold2").disabled = false;
    document.getElementById("hold3").disabled = false;
    document.getElementById("reel1").classList.remove('hold');
    document.getElementById("reel2").classList.remove('hold');
    document.getElementById("reel3").classList.remove('hold');
  }
};

function getNumbers() {
  if(document.getElementById("hold1").checked == false){
    document.getElementById("reel1").innerHTML = arr[Math.floor(Math.random() * arr.length)];
  } if (document.getElementById("hold2").checked == false){
    document.getElementById("reel2").innerHTML = arr[Math.floor(Math.random() * arr.length)];
  } if (document.getElementById("hold3").checked == false){
    document.getElementById("reel3").innerHTML = arr[Math.floor(Math.random() * arr.length)];
  }

  updateScore();
  insertCoins();
};

function calculateScore() {
    document.getElementById('credits').innerHTML = credits;
}

    // Win, three alike.
function updateScore() {
    if(document.getElementById("reel1").textContent == document.getElementById("reel2").textContent && document.getElementById("reel1").textContent == document.getElementById("reel3").textContent){
      credits += document.getElementById("reel1").textContent * 10;
    } else if("reel1" != "reel2"){
      credits -= 2;
    }
};

function insertCoins() {
  if (credits <1){
    document.getElementById("spin").disabled = true;
  }
};

function freezeReel(num) {
  if (document.getElementById('hold'+num).checked == true) {
    // Unfreeze reel
    document.getElementById("hold"+num).checked = false;
    document.getElementById("reel"+num).classList.remove('hold');
  } else {
    // Freeze reel:
    document.getElementById("hold"+num).checked = true;
    document.getElementById("reel"+num).classList.add('hold');
  }
}
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
.marginauto {
  margin: 0 auto;
}
.button-wrapper {
  text-align: center;
  margin-top: 15%;
}
.hold-wrapper {
  text-align: center;
  margin: 10px;
  font-size: 48px;
}
.holdbutton {
  width: 140px;
  height: 200px;
  visibility: hidden;
}
.credits {
  width: 250px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}
.reel-wrapper {
  width: 1280px;
  text-align: center;
  margin-top: 10px;
  background-color: #ffffff;
}
.button {
  background-color: white;
}
.reels {
  background-color: #ffffff;
  display: inline-block;
  font-size: 48px;
  text-align: center;
  width: 150px;
  height: 200px;
  border: 1px solid black;
  border-radius: 2px;
}
.reels.hold {
  border-color: blue;
  background: #ccc;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> </title>
</head>
<body>
  <header></header>
  <div class="button-wrapper">
    <input id="spin" type="button" onClick="getNumbers(); freezeCheck(); calculateScore();" value="Spin" />
  </div>
  <div class="reel-wrapper marginauto">
    <div id="reel1" onClick="freezeReel(1);" class="reels"></div>
    <div id="reel2" onClick="freezeReel(2);" class="reels"></div>
    <div id="reel3" onClick="freezeReel(3);" class="reels"></div>
  </div>
  <div class="hold-wrapper">
    <input id="hold1" type="checkbox" value="Hold" class="holdbutton" />
    <input id="hold2" type="checkbox" value="Hold" class="holdbutton" />
    <input id="hold3" type="checkbox" value="Hold" class="holdbutton" />
  </div>
    <div class="credits">Your Credits: <span id="credits"></span></div>
  <script src="script.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您应该使用backgroundImage javascript属性，并使用数组arr中的来源提供值。

参考代码：

＆＃13;
＆＃13; 
var arr = ['image1.png', 'image2.png', 'image3.png'];

var credits = 10;

function freezeCheck() {
  if (document.getElementById("hold1").checked == true || document.getElementById("hold2").checked == true || document.getElementById("hold3").checked == true) {
    // if any is checked, freeze hold buttons.
    document.getElementById("hold1").checked = false;
    document.getElementById("hold2").checked = false;
    document.getElementById("hold3").checked = false;

    document.getElementById("hold1").disabled = true;
    document.getElementById("hold2").disabled = true;
    document.getElementById("hold3").disabled = true;
  } else if (document.getElementById("hold1").disabled == true) {
    // if any diabled, enable (unfreeze) all hold buttons.
    document.getElementById("hold1").disabled = false;
    document.getElementById("hold2").disabled = false;
    document.getElementById("hold3").disabled = false;
    document.getElementById("reel1").classList.remove('hold');
    document.getElementById("reel2").classList.remove('hold');
    document.getElementById("reel3").classList.remove('hold');
  }
};

function getNumbers() {
  if(document.getElementById("hold1").checked == false){
    document.getElementById("reel1").backgroundImage = "url(" + arr[0] + ")";
  } if (document.getElementById("hold2").checked == false){
    document.getElementById("reel2").backgroundImage = "url(" + arr[1] + ")";
  } if (document.getElementById("hold3").checked == false){
    document.getElementById("reel3").backgroundImage = "url(" + arr[2] + ")";
  }

  updateScore();
  insertCoins();
};

function calculateScore() {
    document.getElementById('credits').innerHTML = credits;
}

    // Win, three alike.
function updateScore() {
    if(document.getElementById("reel1").textContent == document.getElementById("reel2").textContent && document.getElementById("reel1").textContent == document.getElementById("reel3").textContent){
      credits += document.getElementById("reel1").textContent * 10;
    } else if("reel1" != "reel2"){
      credits -= 2;
    }
};

function insertCoins() {
  if (credits <1){
    document.getElementById("spin").disabled = true;
  }
};

function freezeReel(num) {
  if (document.getElementById('hold'+num).checked == true) {
    // Unfreeze reel
    document.getElementById("hold"+num).checked = false;
    document.getElementById("reel"+num).classList.remove('hold');
  } else {
    // Freeze reel:
    document.getElementById("hold"+num).checked = true;
    document.getElementById("reel"+num).classList.add('hold');
  }
}
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
.marginauto {
  margin: 0 auto;
}
.button-wrapper {
  text-align: center;
  margin-top: 15%;
}
.hold-wrapper {
  text-align: center;
  margin: 10px;
  font-size: 48px;
}
.holdbutton {
  width: 140px;
  height: 200px;
  visibility: hidden;
}
.credits {
  width: 250px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}
.reel-wrapper {
  width: 1280px;
  text-align: center;
  margin-top: 10px;
  background-color: #ffffff;
}
.button {
  background-color: white;
}
.reels {
  background-color: #ffffff;
  display: inline-block;
  font-size: 48px;
  text-align: center;
  width: 150px;
  height: 200px;
  border: 1px solid black;
  border-radius: 2px;
}
.reels.hold {
  border-color: blue;
  background: #ccc;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> </title>
</head>
<body>
  <header></header>
  <div class="button-wrapper">
    <input id="spin" type="button" onClick="getNumbers(); freezeCheck(); calculateScore();" value="Spin" />
  </div>
  <div class="reel-wrapper marginauto">
    <div id="reel1" onClick="freezeReel(1);" class="reels"></div>
    <div id="reel2" onClick="freezeReel(2);" class="reels"></div>
    <div id="reel3" onClick="freezeReel(3);" class="reels"></div>
  </div>
  <div class="hold-wrapper">
    <input id="hold1" type="checkbox" value="Hold" class="holdbutton" />
    <input id="hold2" type="checkbox" value="Hold" class="holdbutton" />
    <input id="hold3" type="checkbox" value="Hold" class="holdbutton" />
  </div>
    <div class="credits">Your Credits: <span id="credits"></span></div>
  <script src="script.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

innerHTML代表您网页中的标准字体，它只显示文字。因为在你的数组中，它的值是#7.png，它只显示＃7.png。 添加以下代码将在您的html代码中创建img标记，图像是随机的。

var elem = document.createElement("img");
elem.setAttribute("src", arr[Math.floor(Math.random() * arr.length)]);
elem.setAttribute("alt", "Slotimg");
document.getElementById("reel1").appendChild(elem);

但是如果你可以创建一个默认图像，我建议你只在你的div中添加一个Img标签，只需用src代码更改src属性，它就会更容易和更有效率

相关问题
最新问题