打地鼠小游戏，比较简陋

最新推荐文章于 2021-12-12 17:18:14 发布

目光所及皆星河

最新推荐文章于 2021-12-12 17:18:14 发布

阅读量91

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_42265650/article/details/108416145

版权

在这里插入代码片
        <style type="text/css">
            body{
                height:500px;
                background-image:url(images/hfbj1.jpg);
            }
        </style>
    </head>
    <body>
        <script src="./public.js"></script>
        <script>
            window.onload=function showImg(){
                setInterval(createImg,1000);
                function createImg(){
                    var oImg=document.createElement("img");
                    document.body.appendChild(oImg);
                    oImg.src="dishu.png";
                    var w=rand(50,200)
                    oImg.width=oImg.height=w;
                    oImg.style.position="absolute";
                    oImg.style.top=rand(0,window.innerHeight-w)+"px";
                    oImg.style.left=rand(0,window.innerWidth-w)+"px";
                    oImg.alt="地鼠";
                    setTimeout(hide,5000)
                    function hide(){
                    document.body.removeChild(oImg)
                    }
                    oImg.onclick = function(){
                        //打掉当前地鼠
                        this.remove();
                        
                    }
                }
            }
            
        </script>
        <input type="button" value="换肤" />
        <script>
            var c=document.getElementsByTagName("input")[0];
            var index=1;
            c.onclick=function(){
                var body=document.querySelector("body");
                index++;
                if(index==5){
                    index=1;
                }               
                body.setAttribute("style","background-image:url(images/hfbj"+index+'.jpg)')//方法一
                /* document.body.style.background="url(images/hfbj"+index+'.jpg)'//方法二 */
            }
        </script>
    </body>