HTML+CSS+JS实现----小姐姐你喜欢我吗的程序

最新推荐文章于 2023-12-19 15:16:36 发布

Sys_菜菜

最新推荐文章于 2023-12-19 15:16:36 发布

阅读量7.9k

点赞数 5

分类专栏：学习文章标签：抖音小姐姐你喜欢我吗调戏小姐姐代码有意思的代码

本文链接：https://blog.csdn.net/qq_26657121/article/details/81323493

版权

学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

分享一个我之前刷知乎，刷出抖音上的一个有意思的视频，然后我仿照着做了一个网页版的。

原视频找不到了，找到一个类似的视频。

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事件。

Sys_菜菜

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS实现----小姐姐你喜欢我吗的程序

分享一个我之前刷知乎，刷出抖音上的一个有意思的视频，然后我仿照着做了一个网页版的。原视频找不到了，找到一个类似的视频。https://zhuanlan.zhihu.com/p/38176547?utm_source=qq&amp;utm_medium=social&amp;utm_oi=861196901310152704我写的代码，效果类似于第二个视频，就是点不喜欢按钮点不到，按钮会...
复制链接

扫一扫