<!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>