JS原生隱藏顯示圖片,點擊切換圖片的效果

時間 2019-11-21

標籤原生隱藏顯示圖片點擊切換效果欄目 JavaScript 简体版

原文原文鏈接

今天要說的內容,看標題就都能知道了!全部知識點一覽無遺啊!我們今天的東西,是純純的原生JS代碼,html

我先說一下要求,spa

1.有兩個按鈕,內容爲顯示,和換,code

2.當點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來htm

3.當點擊換的時候,圖片會變成另一張,當再次點擊的時候,圖片又會變回來,blog

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>

就是這麼簡單,大家學會了嗎???ip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。