JavaScript实现：点击图片使两张图片交替出现

最新推荐文章于 2023-01-31 23:36:48 发布

原创最新推荐文章于 2023-01-31 23:36:48 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一个简单的JavaScript代码示例，通过点击事件实现两张图片的交替显示。适用于初学者理解DOM操作和事件绑定的基本概念。

第一次写JavaScript，纪念一下。加油！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击图片使两张图片交替出现</title>
</head>
<body>
<img src="cute.jpg" id="图片">

<script>
    <!--获取图片对象-->
    var picture = document.getElementById("图片")
    var flag = true;
    <!--绑定点击事件-->
    picture.onclick = function () {
        if (flag) {
            picture.src="可爱.jpg";
            flag=false;
        }
        else{
            picture.src="cute.jpg";
            flag = true;
        }

    }
</script>

</body>
</html>