vue仿淘宝滑动验证码功能(样式模仿)
程序员文章站
2022-03-20 18:41:05
我们知道验证码的目的 是为了验证到底是人还是机器。
淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作。
我...
我们知道验证码的目的 是为了验证到底是人还是机器。
淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作。
我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器)。
因为touch事件和mouse事件不同,和获取clientx在移动端和pc端也不同!!!所以分两端
下面有pc端和移动端!!!(2019-03-12更新)
本文基于vue,引入下面组件 可以直接使用
1、实际效果
2、pc端!!! vue组件(下面是一个vue组件,可以引入直接使用)
<template> <div class="drag" ref="dragdiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmwords}}</div> <div ref="movediv" @mousedown="mousedownfn($event)" :class="{'handler_ok_bg':confirmsuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div> </div> </template> <script> export default { data(){ return { beginclientx:0, /*距离屏幕左端距离*/ mousemovestata:false, /*触发拖动状态 判断*/ maxwidth:'', /*拖动最大宽度,依据滑块宽度算出来的*/ confirmwords:'拖动滑块验证', /*滑块文字*/ confirmsuccess:false /*验证成功判断*/ } }, methods: { mousedownfn:function (e) { if(!this.confirmsuccess){ e.preventdefault && e.preventdefault(); //阻止文字选中等 浏览器默认事件 this.mousemovestata = true; this.beginclientx = e.clientx; } }, //mousedoen 事件 successfunction(){ this.confirmsuccess = true this.confirmwords = '验证通过'; if(window.addeventlistener){ document.getelementsbytagname('html')[0].removeeventlistener('mousemove',this.mousemovefn); document.getelementsbytagname('html')[0].removeeventlistener('mouseup',this.moseupfn); }else { document.getelementsbytagname('html')[0].removeeventlistener('mouseup',()=>{}); } document.getelementsbyclassname('drag_text')[0].style.color = '#fff' document.getelementsbyclassname('handler')[0].style.left = this.maxwidth + 'px'; document.getelementsbyclassname('drag_bg')[0].style.width = this.maxwidth + 'px'; }, //验证成功函数 mousemovefn(e){ if(this.mousemovestata){ let width = e.clientx - this.beginclientx; if(width>0 && width<=this.maxwidth){ document.getelementsbyclassname('handler')[0].style.left = width + 'px'; document.getelementsbyclassname('drag_bg')[0].style.width = width + 'px'; }else if(width>this.maxwidth){ this.successfunction(); } } }, //mousemove事件 moseupfn(e){ this.mousemovestata = false; var width = e.clientx - this.beginclientx; if(width<this.maxwidth){ document.getelementsbyclassname('handler')[0].style.left = 0 + 'px'; document.getelementsbyclassname('drag_bg')[0].style.width = 0 + 'px'; } } //mouseup事件 }, mounted(){ this.maxwidth = this.$refs.dragdiv.clientwidth - this.$refs.movediv.clientwidth; document.getelementsbytagname('html')[0].addeventlistener('mousemove',this.mousemovefn); document.getelementsbytagname('html')[0].addeventlistener('mouseup',this.moseupfn) } } </script> <style scoped> .drag{ position: relative; background-color: #e8e8e8; width: 100%; height: 34px; line-height: 34px; text-align: center; } .handler{ width: 40px; height: 32px; border: 1px solid #ccc; cursor: move; } .handler_bg{ background: #fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==") no-repeat center; } .handler_ok_bg{ background: #fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==") no-repeat center; } .drag_bg{ background-color: #7ac23c; height: 34px; width: 0px; } .drag_text{ position: absolute; top: 0px; width: 100%;text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select:none; -ms-user-select:none; } </style>
3、移动端!!! vue组件(下面是一个vue组件,可以引入直接使用)
<template> <div class="drag" ref="dragdiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmwords}}</div> <div ref="movediv" @touchstart="mousedownfn($event)" :class="{'handler_ok_bg':confirmsuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div> </div> </template> <script> export default { data(){ return { beginclientx:0, /*距离屏幕左端距离*/ mousemovestata:false, /*触发拖动状态 判断*/ maxwidth:'', /*拖动最大宽度,依据滑块宽度算出来的*/ confirmwords:'拖动滑块验证', /*滑块文字*/ confirmsuccess:false /*验证成功判断*/ } }, methods: { mousedownfn:function (e) { if(!this.confirmsuccess){ e.preventdefault && e.preventdefault(); //阻止文字选中等 浏览器默认事件 this.mousemovestata = true; this.beginclientx = e.changedtouches[0].clientx; } }, //mousedoen 事件 successfunction(){ this.confirmsuccess = true this.confirmwords = '验证通过'; if(window.addeventlistener){ document.getelementsbytagname('html')[0].removeeventlistener('touchmove',this.mousemovefn); document.getelementsbytagname('html')[0].removeeventlistener('touchend',this.moseupfn); }else { document.getelementsbytagname('html')[0].removeeventlistener('touchend',()=>{}); } document.getelementsbyclassname('drag_text')[0].style.color = '#fff' document.getelementsbyclassname('handler')[0].style.left = this.maxwidth + 'px'; document.getelementsbyclassname('drag_bg')[0].style.width = this.maxwidth + 'px'; }, //验证成功函数 mousemovefn(e){ if(this.mousemovestata){ let width = e.changedtouches[0].clientx - this.beginclientx; if(width>0 && width<=this.maxwidth){ document.getelementsbyclassname('handler')[0].style.left = width + 'px'; document.getelementsbyclassname('drag_bg')[0].style.width = width + 'px'; }else if(width>this.maxwidth){ this.successfunction(); } } }, //mousemove事件 moseupfn(e){ this.mousemovestata = false; var width = e.changedtouches[0].clientx - this.beginclientx; if(width<this.maxwidth){ document.getelementsbyclassname('handler')[0].style.left = 0 + 'px'; document.getelementsbyclassname('drag_bg')[0].style.width = 0 + 'px'; } } //mouseup事件 }, mounted(){ this.maxwidth = this.$refs.dragdiv.clientwidth - this.$refs.movediv.clientwidth; document.getelementsbytagname('html')[0].addeventlistener('touchmove',this.mousemovefn); document.getelementsbytagname('html')[0].addeventlistener('touchend',this.moseupfn) } } </script> <style scoped> .drag{ position: relative; background-color: #e8e8e8; width: 100%; height: 34px; line-height: 34px; text-align: center; } .handler{ width: 40px; height: 32px; border: 1px solid #ccc; cursor: move; } .handler_bg{ background: #fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==") no-repeat center; } .handler_ok_bg{ background: #fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==") no-repeat center; } .drag_bg{ background-color: #7ac23c; height: 34px; width: 0px; } .drag_text{ position: absolute; top: 0px; width: 100%;text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select:none; -ms-user-select:none; } </style>
总结
以上所述是小编给大家介绍的vue仿淘宝滑动验证码功能,希望对大家有所帮助
上一篇: vue基于v-charts封装双向条形图的实现代码
下一篇: 解决c++调用python中文乱码问题