HTML+CSS+JS實現----小姐姐你喜歡我嗎的程式

Sys_菜菜發表於2018-08-02
HTMLCSSJS

分享一個我之前刷知乎，刷出抖音上的一個有意思的視訊，然後我仿照著做了一個網頁版的。

原視訊找不到了，找到一個類似的視訊。

https://zhuanlan.zhihu.com/p/38176547?utm_source=qq&utm_medium=social&utm_oi=861196901310152704

我寫的程式碼，效果類似於第二個視訊，就是點不喜歡按鈕點不到，按鈕會亂跑，只能點喜歡，直接上程式碼：

Git地址：https://github.com/yangss0425/learned.git

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="img/xiao.jpg" ype="image/x-icon" />
    <title>小姐姐</title>
    <!-- <script>
        var x2 = Window.clientWidth;
        var y2 = window.clientHeight;
        document.getElementById("d1").style.offsetWidth = "x2 * 0.5" + 'px';
        document.getElementById("d1").style.offsetHeight = "y2 * 0.5" + 'px';
    </script> -->
    <style>
        #d1 {
            float: left;
            position: relative;
            left: 15%;
            width: 1000px;
            height: 600px;
            background-color: rgb(241, 235, 235);
            border: 1px solid black;
            border-radius: 2%;
            margin-top: 2%;
        }

        #p1 {
            display: table;
            margin-top: 10%;
            margin-left: 32%;
            text-align: center;
            font-size: 2em;
        }

        button {
            width: 100px;
            height: 40px;
            font-size: 100%;
            /* border-radius: 2%; */
        }

        #b1 {
            position: absolute;
            left: 30%;
            top: 50%;
        }

        #b2 {
            position: absolute;
            left: 50%;
            top: 50%;
        }

        body {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="d1">
        <p id="p1">
            小姐姐你喜歡我嗎？
        </p>
        <button id="b1">喜歡</button>
        <button id="b2">不喜歡</button>
    </div>
    <script>
        var x1 = document.getElementById("d1").clientWidth;
        var y1 = document.getElementById("d1").clientHeight;

        // var x = document.getElementById("d1").scrollWidth;
        // var y = document.getElementById("d1").scrollHeight;
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onmouseover = handleMouseover;
            buttons[i].onclick = handleClick;
        }
        function handleClick(e) {
            if (e.target.id == "b1") {
                alert("對不起，我是你永遠也得不到的男人！");
            }
            else if (e.target.id == "b2") {
                alert("哎呀！點到了!");
            }
        }

        function handleMouseover(e) {
            if (e.target.id == "b1") {
                e.target.title = "快點我啊！";
            }
            else if (e.target.id == "b2") {
                var doc = document.getElementById("b2");

                // document.getElementById("p1").innerHTML += "<br>" + x1;
                // document.getElementById("p1").innerHTML += "<br>" + y1;
                // document.getElementById("p1").innerHTML += "<br>" + x;
                // document.getElementById("p1").innerHTML += "<br>" + y;
                e.target.style.left = Math.random() * (x1 - doc.offsetWidth) + "px";
                e.target.style.top = Math.random() * (y1 - doc.offsetHeight) + "px";

                /*測試按鈕位置*/
                // e.target.style.left = 1000 - 100 + "px";
                // e.target.style.top = 600 - 40 + "px";

                /*檢視獲取高度寬度 邊框值*/
                // alert(document.getElementById("b2").offsetHeight);
                // alert(doc.offsetWidth);

                /*測試按鈕邊框取值*/
                // e.target.style.left = 1000 - doc.offsetWidth + "px";
                // e.target.style.top = 600 - doc.offsetHeight + "px";

                /*測試隨機位置仍在滑鼠所指位置*/
                // e.target.style.left = Math.random() * 100 - doc.offsetWidth + "px";
                // e.target.style.top = Math.random() * 60 - doc.offsetHeight + "px";
            }
        }
    </script>
</body>

</html>

 

再截一張，我自己跑的截圖

程式碼缺點和改進建議:

1、灰色區域的長和寬是固定的，放在另一臺電腦上就不一定適配螢幕了。

改進：讀取電腦螢幕，根據螢幕設定灰色區域的大小。

2，按鈕移動bug，按鈕隨機移動存在理論機率----按鈕的下一次移動恰好在當前滑鼠停留位置之下。

改進：設定隨機移動，移動位置排除當前滑鼠可能停留在按鈕的區域（有點複雜了），

或者，迴圈判斷當前按鈕位置是否在滑鼠停留位置之下，如果是，則按鈕繼續隨機移動，直到結果為否，按鈕暫時停留當前位置，直到下次滑鼠移動到按鈕之上，觸發mouserover事件。

相關文章