今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生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>
就是这么简单,你们学会了吗???