今天要說的內容,看標題就都能知道了!所有知識點一覽無遺啊!咱們今天的東西,是純純的原生JS代碼,
我先說一下要求,
1.有兩個按鈕,內容為顯示,和換,
2.當點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來
3.當點擊換的時候,圖片會變成另外一張,當再次點擊的時候,圖片又會變回來,
4.當圖片隱藏的時候,圖片不可變換
這就是要求,下面來看代碼:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>換圖片</title></head><body><button id="btn">隱藏</button><button id="btu">換</button><img src="11.jpg" id="img" width="300px" /></body><script>var btn = document.getElementById("btn");var btu = document.getElementById("btu");var img = document.getElementById("img"); var xia = 0; btn.addEventListener("click",function (){ //判斷按鈕文字內容 if(btn.innerText == "隱藏"){ //當按鈕文字為隱藏時,圖片隱藏 img.style.opacity = 0; //同時,按鈕文字變成現實 下面同理 btn.innerText = "顯示"; }else{ img.style.opacity = 1; btn.innerText = "隱藏"; } }); var imgs = ["11.jpg","12.jpg"]; //給"換"添加點擊事件 btu.addEventListener("click",function (){ if(btn.innerText == "隱藏"){ if(xia < 1){ xia++; }else{ xia = 0; } img.src = imgs[xia]; }else{ alert("圖片隱藏，不能切換"); } }); </script></html> 就是這么簡單,你們學會了嗎?
新聞熱點
疑難解答
