今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码,
我先说一下要求,
1.有两个按钮,内容为显示,和换,
2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来
3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来,
4.当图片隐藏的时候,图片不可变换
这就是要求,下面来看代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>换图片</title> </head> <body> <button>隐藏</button> <button>换</button> <img src="https://www.jb51.net/article/11.jpg" /> </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 = ["https://www.jb51.net/article/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>
就是这么简单,你们学会了吗?
您可能感兴趣的文章: