Question

所以我正在建立一个游戏，你必须根据显示的随机数选择正确的图像。我正试图找到一种方法来改变你点击的图像的不透明度，如果你没有选择正确的图像。我看到很多关于改变不透明度的帖子或者悬停，但我想仅在图像与数字不对应时更改它。我试图更改不同帖子中给出的代码，但没有成功。也许我应该使用if / else语句？还是一个改变CSS的功能？这对我来说很新，所以我有点失落。

<body>
<div id="consigne"></div>
<div id="container">

  <input class="img" type="image" id="leve-couche" src="soleil.png" alt="leve-couche-soleil">
  <input class="img" type="image" id="jour" src="jour.png" alt="jour">
  <br />
  <input class="img" type="image" id="nuit" src="nuit.png" alt="nuit">
 </div>

</div>

<script>

var sunrise_sunset = [19, 20 ,6, 7];
var night = [21, 22, 23, 0, 1, 2, 3, 4, 5];
var day = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
var hours = sunrise_sunset.concat(night).concat(day);
var consigne = 'Il est ';

var randomHour = Math.floor(Math.random() * hours.length);

document.getElementById("consigne").innerHTML = consigne + '<strong>' + getHourStringValue(randomHour) + '</strong>.';

document.getElementById("leve-couche").addEventListener("click", function(){checkAnswer(sunrise_sunset)}, false);
document.getElementById("nuit").addEventListener("click", function(){checkAnswer(night)}, false);
document.getElementById("jour").addEventListener("click", function(){checkAnswer(day)}, false);

function getHourStringValue(hour) {
  if(hour == 0) { return 'minuit'; }
  if(hour == 12) { return 'midi'; }
  if(hour == 1) { return hour + ' heure'; }
  return hour + ' heures';
}

function checkAnswer(array) {  
  var isCorrect = false;
  for(var i = 0; i<array.length; i++) {
    if(array[i] == randomHour){
        isCorrect = true;
      break;
    }
  }

  if(isCorrect){
    alert('Yeah!');
  }else{
    alert('Try again!');
  }
}

</script>

谢谢：）

Answer 1

尝试使用以下内容：

document.getElementById("test").style.opacity="0.5"

你可以用0到1之间的值替换0.5（越接近0就越透明）并用你的一个图像的id测试 - 即＆＃34; jour＆＃34;或＆＃34; nuit＆＃34;。

我在这里有一个例子：https://jsfiddle.net/motoyL7u/4/

这表示Javascript会更改与数字不对应的两个图像的不透明度。

Javascript - 根据功能结果改变图像的不透明度

1 个答案: