今天要說的內容,看標題就都能知道了!所有知識點一覽無遺啊!咱們今天的東西,是純純的原生JS代碼, 我先說一下要求, 1.有兩個按鈕,內容為顯示,和換, 2.當點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來 3.當點擊換的時候,圖片會變成另外 ...
今天要說的內容,看標題就都能知道了!所有知識點一覽無遺啊!咱們今天的東西,是純純的原生JS代碼,
我先說一下要求,
1.有兩個按鈕,內容為顯示,和換,
2.當點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來
3.當點擊換的時候,圖片會變成另外一張,當再次點擊的時候,圖片又會變回來,
4.當圖片隱藏的時候,圖片不可變換
這就是要求,下麵來看代碼:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>換圖片</title> 6 </head> 7 <body> 8 <button id="btn">隱藏</button> 9 <button id="btu">換</button> 10 <img src="11.jpg" id="img" width="300px" /> 11 </body> 12 <script> 13 var btn = document.getElementById("btn"); 14 var btu = document.getElementById("btu"); 15 var img = document.getElementById("img"); 16 var xia = 0; 17 btn.addEventListener("click",function (){ 18 //判斷按鈕文字內容 19 if(btn.innerText == "隱藏"){ 20 //當按鈕文字為隱藏時,圖片隱藏 21 img.style.opacity = 0; 22 //同時,按鈕文字變成現實 下麵同理 23 btn.innerText = "顯示"; 24 }else{ 25 img.style.opacity = 1; 26 27 btn.innerText = "隱藏"; 28 } 29 }); 30 31 var imgs = ["11.jpg","12.jpg"]; 32 //給"換"添加點擊事件 33 btu.addEventListener("click",function (){ 34 if(btn.innerText == "隱藏"){ 35 if(xia < 1){ 36 xia++; 37 }else{ 38 xia = 0; 39 } 40 img.src = imgs[xia]; 41 }else{ 42 alert("圖片隱藏，不能切換"); 43 } 44 45 }); 46 47 </script> 48 49 </html>
就是這麼簡單,你們學會了嗎???
