點擊驗證碼，更換驗證碼的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