了解更多开源请访问：开源基础软件社区https://ost.51cto.com网站上的代码是为了保护网站的安全。一般网站都必须通过验证码，以防止大规模注册机器等危害。一般的验证码有：图片验证、算术验证、滑动验证等，有些验证码验证起来有点麻烦。对我来说，最方便的验证方式是滑动滑块验证。使用滑块验证的体验非常好。所以在这篇文章中，我将尝试实现一个滑动验证码。当然这种验证码一般都是由第三方处理的，因为不仅仅是滑动，还要判断用户的拖拽轨迹是否符合真实用户的行为特征，所以我就简单实现一下。简介这是一个滑块验证码。用户只需要将滑块滑动到最右侧即可判断用户验证是否成功。效果是我为滑块验证添加了验证条件。用户可以限制滑块的速度。例如，当滑块向右滑动时，平均速度小于3。如果用户滑动速度大于3，则验证失败。一共刷了三次：第一次：没有滑到最右边，认证失败。第二次：滑动速度太快，认证失败。第三次：滑动速度达到限制，认证成功。使用1.参数支持参数名称参数说明参数类型默认值width滑块宽度Number300height滑块高度Number50limit滑块速率限制Number42，事件支持事件名称事件描述通过自定义事件getMsg获取验证结果。原理分析1.滑动原理首先我们需要获取组件加载时滑块可以滑动的最大距离。我们使用最大距离来判断滑块是否向右滑动。注意组件的生命周期。在自定义组件中，没有onShow，需要使用onLayoutReady()，这个钩子函数在自定义组件布局完成后调用。然后在触摸屏事件中，获取触摸的X坐标，为起点；在触摸移动事件中，获取最新的X坐标，然后减去起始坐标得到偏移量。最后判断偏移量是否大于滑块可以滑动的最大距离，如果不大于则将偏移量设置为滑块的滑动距离。为了更好地理解，我展示了滑块的隐藏部分。touchstart(e){//设置X轴的起点this.startPositionX=e.touches[0].localX;this.startTime=0this.s=0this.num=0},//滑块移动时执行Eventtouchmove(e){constoffsetX=e.touches[0].localX-this.startPositionX//如果滑动还在allowed验证成功后，执行如下代码块（默认允许初始值）if(this.isSlide){//当x坐标大于最大可移动距离时，则当前x坐标为最大可移动距离if(offsetX>=this.max){this.x=this.max}else{//滑动当前鼠标x坐标块的移动距离this.x=offsetX;}}},2.验证原则这里的验证并不严谨，只是一个小小的尝试。验证原则主要是通过滑动的平均速度来判断。如果用户的滑动速度超过设定的速度，则验证失败。所以我们需要使用时间戳。第一步，我们获取移动事件开始时的当前时间戳；在移动事件结束时将当前时间戳赋值给上一个时间，这样就可以通过当前时间戳-上一个时间得到时间间隔。第二步，我们还需要获取偏移量。上面的滑动原理已经介绍了如何获取。第三步，有了时间间隔和偏移量，我们就可以计算出本次滑行的速度，然后用滑行的总数求出平均速度。最后我们只需要在touchend事件中进行判断，判断滑块是否已经达到最大滑动距离，滑块的平均滑动速度是否达到限制。touchmove(e){constoffsetX=e.touches[0].localX-this.startPositionXconstcurrTime=Date.now()if(this.startTime!==0){constduration=currTime-this.startTime//通过输入倒数第二个点、最后一个点和持续时间，将返回加速度constv=parseInt(offsetX/duration)this.num++this.s=this.s+v}this.startTime=currTime//如果验证成功后仍然允许滑动，执行如下代码块（初始值默认允许）if(this.isSlide){//当x坐标大于最大可移动距离时，则当前x坐标为最大可移动距离if(offsetX>=this.max){this.x=this.max}else{//将当前鼠标x坐标移动到滑块的距离this.x=offsetX;}}},//滑动条松开时执行的事件touchend(e){//计算平均速度constavg=this.s/this.numconsole.log(avg)//滑动时提供的数据对象自定义组件触发事件vardata={};//如果触摸的X轴坐标大于等于limit可移动范围，平均滑动速度不能超过100，则验证成功if(this.x==this.max&&avg
