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