<!DOCTYPE html> <!-- saved from url=(0074)http://localhost:63342/%E7%A8%8B%E5%86%AC/%E7%BB%83%E4%B9%A0/lianxi40.html --> <html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <div> 綜合練習六 </div> <div> <img src="psb.jpg" alt="" style="display: none;" width="250"> </div> <br><br> <button id="cd">顯示圖片</button> <ol>要求： <li>點擊按鈕后，按鈕變為不可用狀態，圖片逐漸由看不見到模糊，最后清晰顯示</li> <li>圖片清晰顯示后，按鈕變為可用狀態，同時按鈕文字變為"隱藏圖片"</li> <li>再點擊按鈕，按鈕又變為不可用狀態，同時圖片慢慢模糊，直到消失，消失后按鈕變為可用，同時按鈕文字提示："顯示圖片"</li> </ol> <div></div> <script> var opnum=0.02, imgtime; function show(){ var button=document.getElementById("cd"); var img1 = document.images[0]; opnum+=0.02; img1.style.opacity=opnum; img1.style.display="block"; if(opnum>=1){ button.disabled=false; button.innerHTML="隱藏圖片"; clearInterval(imgtime); } } function hidden(){ var button=document.getElementById("cd"); var img1 = document.images[0]; opnum-=0.02; img1.style.opacity=opnum; img1.style.display="block"; if(opnum<=0){ button.disabled=false; button.innerHTML="顯示圖片"; clearInterval(imgtime); } } document.getElementById("cd").onclick=function(){ var button=document.getElementById("cd"); var img1 = document.images[0]; // 圖片的透明度 img1.style.opacity=0; // 圖片的隱藏 img1.style.display="block"; // 按鈕變為可用 button.disabled = true; // 圖片出現的時間和隱藏的時間 if(button.innerHTML=="顯示圖片"){ imgtime=setInterval(show, 100); } else{ imgtime=setInterval(hidden, 100); } } </script> </body> </html>