点击验证码，更换验证码的value值

时间 2021-02-19

标签 php html 面试 segmentfault 数组 dom 函数 code htm 栏目 PHP 繁體版

原文原文链接

`<!DOCTYPE html>`

`<``html``>`

`<``head``>`

`<``meta` `charset``=``"UTF-8"``>`

`<``meta` `name``=``"viewport"` `content``=``"width=device-width, initial-scale=1.0"``>`

`<``meta` `http-equiv``=``"X-UA-Compatible"` `content``=``"ie=edge"``>`

`<``title``>Document</``title``>`

`</``head``>`

`<``body``>`

`<``input` `type``=``"text"` `value``=``""` `id``=``"suiji"` `placeholder``=``"请输入图片中的验证码"``>`

`<``input` `type``=``"button"` `value``=``"1J5j"` `id``=``"yanzhengma"` `>`

`<``input` `type``=``"submit"` `value``=``"登陆"` `id``=``"tijiao"``>`

`</``body``>`

`</``html``>`

`<``script``>`

`// 生成一个四位数的随机验证码 利用for循环和表单验证 验证输入的内容是否正确`

`// 获取标签`

`var suiji = document.getElementById('suiji'),`

`yanzhengma = document.getElementById('yanzhengma'),`

`tijiao  =document.getElementById('tijiao');`

`//1.生成一个四位数的随机验证码 （包括数字和字母大小写）;`

`//声明一个数组  须要从中抽取`

`var arr1='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';`

`var arr2=[];`

`//生成四位随机数`

`// suiji=Math.floor(Math.random()*arr1.length);`

`//使用for循环`

`for(var i=0;i<``4``;i++){`

`arr2+=arr1[Math.floor(Math.random()*arr1.length)]`

`}`

`yanzhengma.value``=``sortrandom``();`

`//给提交按钮  绑定事件`

`tijiao.onclick``=``function``(){`

`//判断输入的验证码是否和随机验证码的value相同`

`if(suiji.value==yanzhengma.value){`

`location.href``=``'http://www.jd.com'`

`}else{`

`alert('验证码输入不正确，请从新输入')`

`}`

`}`

`//实现点击验证码的时候 刷新验证码`

`yanzhengma.onclick``=``function``(){`

`yanzhengma.value``=``sortrandom``();`

`}`

`//这是一个函数，这个函数就是生成随机数的`

`function sortrandom(){`

`var ``arr1``=``'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'``;`

`var arr2=[];`

`for(var ``i``=``0``;i<4;i++){`

`arr2+=arr1[Math.floor(Math.random()*arr1.length)]`

`}`

`return arr2;`

`}`

`</script>`

猜你喜欢：php工程师面试须要注意哪些方面？
阅读原文php