Javascript-根据函数的结果更改图像的不透明度

Javascript -Change opacity of image depending on result of function

本文关键字：图像 不透明度 结果 函数 Javascript-      更新时间：2023-09-26

所以我正在构建一个游戏，在这个游戏中，你必须根据显示的随机数选择正确的图像。我正试图找到一种方法来改变你点击的图像的不透明度，如果你没有选择正确的图像。我看到很多关于点击或悬停时更改不透明度的帖子，但我只想在图像与数字不符的情况下更改它。我试图更改不同帖子中给出的代码，但没有成功。也许我应该使用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>

谢谢：）

尝试使用以下方法：

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

其中，您可以将0.5替换为0和1之间的值（越接近0，它就越透明），并使用其中一个图像的id进行测试，即"jour"或"nuit"。

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

这显示了Javascript，它更改了与数字不对应的两个图像的不透明度。

相关文章：