圖片閃爍
功能:
點擊按鈕,實現圖片閃爍
效果如圖:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片閃爍</title>
</head>
<body>
<button id="flash" style=" background: mediumvioletred; color: aqua; height: 40px;">圖片閃爍</button>
<img id="img" src="img/BJN1.jpg" >
</body>
<script type="text/javascript">
var img =document.getElementById("img");
var flash_btn = document.getElementById("flash");
//設置按鈕觸發事件
flash_btn.addEventListener("click",function(){
//調用setInterval()函數,每隔0.25秒隱藏
setInterval(function(){
img.style.opacity = 0; //圖片隱藏
},250)
//再次調用setInterval()函數,每隔0.5秒顯示 時間差就可以形成圖片閃爍功能;
setInterval(function(){
img.style.opacity = 1; //圖片顯示
},500)
})
</script>
</html>