用HTML写的整人小游戏（一）之奔跑的no

亦凉 2022-07-15 00:42 127阅读 0赞

这个小游戏是无意间看到的，觉得很有意思，所以拿出来和大家一起分享lei

基本界面就是下面的，以后希望能做更多的出来分享！谢谢你们、

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #a{
                    width: 500px;
                    height: 200px;
                    position: absolute;
                    left: 500px;
                    top: 200px;
                    padding-top: 100px;
                    background-color: pink;
                    border: 1px black solid ;
                    text-align: center;
                }
                #no{
                    position: absolute;
                    left: 100px;
                    top: 100px;
                }
            </style>
            <script>
                function a(){
                    var no = document.getElementById("no");
                    no.style.left = Math.floor(Math.random()*450)+"px";
                    no.style.top = Math.floor(Math.random()*280)+"px";
                }
                function b(){
                    alert("得到你了！哈哈")
                }
            </script>
        </head>
        <body>
            <div id="a" clas="a" style="color: red;">
                <span>DO you wang to marry with  me?</span><br />
                <button onclick="b()">yes</button>  <br />
                <button onmouseover="a()" id="no">no</button>
            </div>
        </body>
    </html>

![Center][]

[Center]: /images/20220715/bfd6d453b2114b1c8df25dd762fb7a1b.png