小功能复刻-点不到的按钮

160 阅读1分钟

大家应该有见过一个表情包,屏幕上显示着问题,下面有两个按钮,分别是确认或者取消。

当点击取消时,取消上的字自动变为确认,所以永远点不到写着”确认“按钮的字。

或者鼠标悬停在某按钮上,还没点击,按钮就自动换了位置。

最近突然想到,如果可以自定义问题,然后写好问题给别人看,比如“可以做你的npy么”,“你是不是**”,等等问题,岂不是可以让别人只能点击确认了。

下面是demo。

test.gif

代码实现并不复杂。

QQ图片20240325054059.png

核心的methods中,设置mouseenter事件绑定swap函数,将不是,自动变为是的。

同时,之前的是的,可以变为不是,让使用者永远无法点击-不是-按钮。

还有一种套路,就是悬停时候,按钮自动变位置。

这里我们可以先做出几个不同位置的元素,用变量控制显隐,初始只显示一个元素。

然后每次鼠标悬停,都随机数一下,随机出下一个要显示的元素,当前元素隐藏即可。

在之前我设置了一个输入框,可以让看官自定义想问的问题,嘿嘿。

ok,下面就是在线使用地址,使用pc端打开哦,毕竟一般只有鼠标,才可以有悬停,而不点击的效果~

在线体验(地址比较好记,answer-yes,字面意思,只能回答yes)

answer-yes.pages.dev

最后放一下源码链接,欢迎玩耍,点点star~

github.com/heygsc/answ…