javaScript 使用切换图片与文字

最新推荐文章于 2023-09-08 10:35:31 发布

生存后才能理想

最新推荐文章于 2023-09-08 10:35:31 发布

阅读量1.3k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/m0_71917549/article/details/127183049

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猫狗切换</title>
    <script type="text/javascript">
        function changeImgs() {

            //对程序的结构进行一个调整
            //(1) input 增加id, 可以修改value
            var but1 = document.getElementById("but1");
            //1. 得到所有的img
            var imgs = document.getElementsByTagName("img");
            //imgs 是 HTMLCollections
            //alert("动物数量是= " + imgs.length);

            if(but1.value == "查看多少小猫,并切换成小狗") { //猫->狗

                //2. 修改src,遍历修改
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].src = "./img/" + (i + 4) + ".png";
                }
                but1.value = "查看多少小狗,并切换成小猫";

            } else if(but1.value == "查看多少小狗,并切换成小猫") {//狗->猫
                //2. 修改src,遍历修改
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].src = "./img/" + (i + 1) + ".png";
                }
                but1.value = "查看多少小猫,并切换成小狗";
            }

            //(2) 根据input 的 value值来决定是切换猫还是狗 if -- else if ---
            //(3) 其它自己先思考
        }
    </script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100">
<br/>
<input type="button" id="but1" onclick="changeImgs()"
       value="查看多少小猫,并切换成小狗"/>
</body>
</html>