葫芦娃大战蛇妖

最新推荐文章于 2022-09-20 09:00:13 发布

sunny_Destiny

最新推荐文章于 2022-09-20 09:00:13 发布

阅读量671

点赞数 1

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492781

版权

今天我们来玩个小游戏--《葫芦娃大战蛇妖》，话不多说，上图！！！

葫芦七兄弟.png

大娃.png

二娃.png

三娃.png

四娃.png

五娃.png

六娃.png

七娃.png

好了，葫芦七兄弟到齐了，我们上代码！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>葫芦娃大战蛇妖</title>
        <style>
            .box,#tip {
                margin: 0 auto;
                width: 1000px;
            }
            
            .box img {
                width: 130px;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <img src="img/one.jpg" alt="one" name="大娃" />
            <img src="img/two.jpg" alt="two" name="二娃" />
            <img src="img/three.jpg" alt="three" name="三娃" />
            <img src="img/four.jpg" alt="four" name="四娃" />
            <img src="img/five.jpg" alt="five" name="五娃" />
            <img src="img/six.jpg" alt="six" name="六娃" />
            <img src="img/seven.jpg" alt="seven" name="七娃" />
        </div>
        <p id="tip"></p>
    </body>
    <script type="text/javascript">
        var pics = document.getElementById("box").getElementsByTagName("img");
        var tip = document.getElementById("tip");
        for(var i = 0; i <= pics.length - 1; i++) {
            pics[i].setAttribute("picId", i + 1);
            pics[i].onclick = function() {
                var _id = this.getAttribute("picId");
                tip.innerHTML = "你派遣的是<span style='color:#f00'>" + _id + "号选手" + this.getAttribute("name") + "<span>和蛇妖作战";
            }
        }
    </script>
</html>

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天.jpg

sunny_Destiny

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
葫芦娃大战蛇妖

今天我们来玩个小游戏--《葫芦娃大战蛇妖》，话不多说，上图！！！葫芦七兄弟.png大娃.png二娃.png三娃.png四娃.png五娃.png六娃.png七娃.png好了，葫芦七兄弟到齐了，我们上代码！<!DOCTYPE html><html&g...
复制链接

扫一扫