为什么这个函数不能使用不透明度

我想通过按下按钮使图像在短时间内稍微透明一点，然后使其再次正常可见。为什么代码不起作用？

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 128px;
height: 128px;
padding: 10px;
}
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="epicenter">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Face-devil-grin.svg/1024px-Face-devil-grin.svg.png" alt="Schwarz" id="black">
</div>
<button onclick="test()">Test</button>

<script>
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {
}
}

function test() {
document.getElementById("black").style.opacity = "0.33";
sleep(3000);
document.getElementById("black").style.opacity = "1";
}
</script>
</body>
</html>

使用setTimeout要简单得多。

function test() {
const el = document.getElementById('black');
el.style.opacity = '0.33';
setTimeout(() => el.style.opacity = '1', 3000);
}

img  width: 128px height: 128px padding: 10px; }
img:hover { opacity: 0.5; }

<div id="epicenter">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Face-devil-grin.svg/1024px-Face-devil-grin.svg.png" alt="Schwarz" id="black">
</div>
<button onclick="test()">Test</button>

您应该使用SetTimeout，而不是定义自己的睡眠函数。

setTimeout(function(){
document.getElementById("black").style.opacity = 1;
}, 3000);

用以上内容替换睡眠功能调用。

请参阅https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals有关更多详细信息，

相关内容

最新更新

热门标签：