原生JS实现隐藏显示图片 JS实现点击切换图片效果
时间：2020-12-15 01:56:16|栏目：JavaScript代码|点击： 次
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生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>
就是这么简单,你们学会了吗?
栏 目：JavaScript代码
下一篇：通过javascript进行UTF-8编码的实现方法
本文标题：原生JS实现隐藏显示图片 JS实现点击切换图片效果
本文地址：http://www.codeinn.net/misctech/33105.html
