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

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

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

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

我写的代码，效果类似于第二个视频，就是点不喜欢按钮点不到，按钮会乱跑，只能点喜欢，直接上代码：

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

    
    
    
    
    



    

        

            小姐姐你喜欢我吗？
        
        喜欢
        不喜欢
    
    

 

再截一张，我自己跑的截图

代码缺点和改进建议:

1、灰色区域的长和宽是固定的，放在另一台电脑上就不一定适配屏幕了。

改进：读取电脑屏幕，根据屏幕设置灰色区域的大小。

2，按钮移动bug，按钮随机移动存在理论几率----按钮的下一次移动恰好在当前鼠标停留位置之下。

改进：设置随机移动，移动位置排除当前鼠标可能停留在按钮的区域（有点复杂了），

或者，循环判断当前按钮位置是否在鼠标停留位置之下，如果是，则按钮继续随机移动，直到结果为否，按钮暂时停留当前位置，直到下次鼠标移动到按钮之上，触发mouserover事件。