#前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面
首先在页面中准备一个输入框,一个显示验证码的盒子和一个提交按钮
然后加亿些样式
然后大概长这样(有点丑,不过无所谓,主要内容是js)
好,那么开始写js
首先获取这些元素
然后搞一个字符库和一个保存验证码的字符串
那个字符库就直接滚键盘就行了~
因为验证码要多次用到随机数,所以为了方便就先搞一个随机数的函数
因为是验证码,所以不能让生成的文本可以直接被选中复制,所以给加一个文本不可选中
因为验证码不是每次刷新页面就生成一次,看不清是可以换的,要多次生成,所以就把生成验证码的部分写在一个函数里
大概说明一下这部分,原理大概就是创建4(我搞的是4位的验证码)个span,然后分别随机设置文本、字体大小、字体颜色、平移旋转啥的,然后把span添加到div里成为div的子节点,然后不要忘了让str变量储存一下验证码的字符
每次生成之前先将上一次生成的验证码删掉(即把div里的所有子节点删除掉),并且把str重置
然后页面刷新的时候生成一次(调用一次),每次点击div的时候重新生成一次(每次点击调用一次)
再给提交按钮添加点击事件:判断验证输入的验证码对不对,然后刷新验证码,并且自动将输入框中的文本清除
判断验证码这里我为了不区分大小写用了toLowerCase()函数将两个字符串都转化成小写之后再做的比较
至此,功能就都实现的差不多了
看效果:
带注释的完整版代码如下:
以上
ヾ(≧∪≦*)ノ〃
————————————————
版权声明:本文为CSDN博主「60rzvvbj」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
js实现验证码功能_60rzvvbj的博客-CSDN博客blog.csdn.net