这篇文章主要为大家详细介绍了视图(视图)实现滑动验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用视图(视图)实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过。
程序分析
1 .{ 1 }鼠标的点击
2 ._滑块的拖动
{ 1 }未验证之前滑动条上显示的文字
4 ."滑块箭头指向视图(视图)函数
5判断是否拖动完毕
6 ._拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态
点击之后拖动
拖动完毕
有没有感觉很奇妙的呢???美元
在欣赏代码之前准备工作要做好的!
* *010-5900 * *相关架包的引入(三个架包)
src=' js/view。js '/脚本脚本
src=' 339 unpkg。com/element-ui/lib/index。js '/脚本脚本
src='js/jquery.js'/script脚本
代码演示
!文档类型html
超文本标记语言格式
头儿
meta charset='UTF-8 '
标题/标题
src=' js/view。js '/脚本脚本
src=' 339 unpkg。com/element-ui/lib/index。js '/脚本脚本
src='js/jquery.js'/script脚本
样式(风格)。大[
边界半径:30px
位置:相对;
背景色:# 75 CDF 9;
宽度:300像素
高度:34像素
左边距:30像素
上边距:100像素
线路高度:34像素
文字对齐:中心;
}。手[
边界半径:30px
位置:绝对;
顶部:0像素
左:0像素
宽度:40px
高度:32像素
边界:1px固体#ccc
光标:移动;
}。处理程序[
背景:# fff URL(' data:image/png);-伊甸园字幕组=-翻译:粒粒粒粒粒尘紫月猫姐风景校对:粒尘紫月猫姐风景校对:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘
}。处理程序完成[
背景:# fff URL(' data:image/png);-伊甸园字幕组=-翻译:粒粒粒粒粒尘紫月猫姐风景校对:粒尘紫月猫姐风景校对:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘
}。BG[
边界半径:30px
背景色:# 13ce 66
高度:34像素
宽度:0像素
}。文本[
位置:绝对;
顶部:0像素
宽度:300像素
蚊子用户选择:无:
-网络工具包用户选择:无;
用户选择:无:
表示“具有…性质的”用户选择:无:
-ms-用户-选择:无:
}
/风格
/头
体表
div id='应用程序'
div class='大'
差异类='bg'/div
差异类=' text“{ confirm words } }/div
div @ mousedown=' mousewnfn($ event)' class=' hand handler '/div
/div
/div
/body
脚本编写
var vm=新视图
<应用程序名称>:#app,
名称:""
组件:{},
道具:{},
日期()
返回
beginClientX: 0,
摩门教徒:假的,
maxwidth: 258,
确认字: '拖动滑块验证-是啊
/*滑块文字*/
确认成功:假,/*是否成功*/
}
},
已创建(){},
观察:>
},
方法:>
mousedownfn:函数
这个。mousemovestata=true
这个。beginclientx=e . clientx
},
//按下滑块
成功函数()
$(')。手)。removeClass('handler ').添加类(“处理程序完成”);
this.confirmWords='验证通过'我不知道
$(')。"大"。CSS({ 0 })
颜色:#fff
});
$(')。"大"。CSS({ 0 })
背景色:13CE66
});
$(')。手)。CSS({ 0 })
' left': this.maxwidth
});
$(')。bg。)。CSS({ 0 })
' width': this.maxwidth
});
$('body ').unbind(" mousemove ");
$('body ').取消订阅(mouseup);
这。确认成功=真
} //判断是否成功
},
已挂载()
$('body ').on('mousemove ',(e)=& gt
//拖动使用箭头指向视图(视图)函数
如果(这个。mousemvested)>
var width=e .客户端x-this。开始客户端x;
如果(width 0 width=this.maxwidth)>
$(')。手)。CSS({ 0 })
左:宽度
});
$(')。bg。)。CSS({ 0 })
宽度:宽度
});
} else if(宽度this。最大宽度)}
这个。成功函数();
}
}
});
$('body ').on('mouseup ',(e)=& gt
//鼠标放开
这个。mousemovestata=false
var width=e .客户端x-this。开始客户端x;
如果(宽度这个。最大宽度)}
$(')。手)。CSS({ 0 })
左:0
});
$(')。bg。)。CSS({ 0 })
“宽度”:0
});
}
})
}
});
/脚本
/html
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。