网页上按钮更换图片

准备好两张图片

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。目前有三种方法……

上一篇:性能分析 | MySQL 的慢查分析实例


下一篇:java Web