准备好两张图片
media/1.png
media/2.png
摆好图片布局和按钮
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png"/>
window.onload = function (): 表示浏览器把整个页面解析完了再去解析{}内部的代码。
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
getElementById的含义是从id中获取元素，从html中body标签里获取的，flag默认情况为true
写一个按钮发生事件
oBtn.onclick = function () {
flag = false;
oBtn.value="已修改";
if (!flag) {
oPic.src = "img/2.png";
}
};
完整的代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
oBtn.onclick = function () {
flag = false;
oBtn.value="已修改";
if (!flag) {
oPic.src = "img/2.png";
}
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png"/>
</body>
</html>
但是，如果要反复点击按钮可以实现图片来换，怎么办？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
oBtn.onclick = function () {
if (flag) {
oPic.src = "img/1.png";
flag = false;
} else {
oPic.src = "img/2.png";
flag = true;
}
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png"/>
</body>
</html>
从结果上可以看到，第一次切换图片需要按钮两次，但是，有小小的瑕疵怎么解决？
实际上呢，我们似乎忽略了最关键的flag标志，因为默认的情况下img/1.png显示，flag为真，单击按钮还是img/1.png，所以说，按钮事件发生，图片换掉即可，或者if圆括号里flag改成!flag，还可以写flag默认为false。目前有三种方法……