gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:35:55 24 4
gpt4 key购买 nike

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

关于Javascript - 根据函数结果更改图像的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34686164/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com