js+html制作簡(jiǎn)單驗(yàn)證碼
本文實(shí)例為大家分享了JavaScript制作驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
<html>
<head>
<meta charset="utf-8"/>
<title>js驗(yàn)證碼</title>
<style type="text/css">
#login{
width:50px;
height:30px;
line-height:30px;
margin:0 auto;
background-color:#eee;
text-align:center;
color:red;
}
p{
width:75px;
height:30px;
margin:0 auto;
}
</style>
</head>
<body>
<p>驗(yàn)證碼:</p>
<div id="login" onclick="show()"><a href="#"></a></div>
<script type="text/javascript">
function codes(n){
var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
var b="";
for (var i = 0;i<n;i++){
var index=Math.floor(Math.random()*62);
b+=a.charAt(index);
}
return b;
};
function show(){
document.getElementById("login").innerHTML=codes(4);
}
window.onload=show;
</script>
</body>
</html>
另一個(gè)js驗(yàn)證碼的部分代碼:
var code ; //在全局定義驗(yàn)證碼
//產(chǎn)生驗(yàn)證碼
function createCode(){
code = "";
var codeLength = 4;//驗(yàn)證碼的長度
var checkCode = document.getElementById("code");
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//隨機(jī)數(shù)
for(var i = 0; i < codeLength; i++) {//循環(huán)操作
var index = Math.floor(Math.random()*36);//取得隨機(jī)數(shù)的索引(0~35)
code += random[index];//根據(jù)索引取得隨機(jī)數(shù)加到code上
}
checkCode.value = code;//把code值賦給驗(yàn)證碼
}
//校驗(yàn)驗(yàn)證碼
document.getElementById("Yzm").addEventListener("change",validate);
function validate(){
var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得輸入的驗(yàn)證碼并轉(zhuǎn)化為大寫
if(inputCode.length <= 0) { //若輸入的驗(yàn)證碼長度為0
alert("請(qǐng)輸入驗(yàn)證碼!"); //則彈出請(qǐng)輸入驗(yàn)證碼
$("#Yzm").focus();
YZM = false;
}
else if(inputCode != code ) { //若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時(shí)
alert("驗(yàn)證碼輸入錯(cuò)誤!@_@"); //則彈出驗(yàn)證碼輸入錯(cuò)誤
createCode();//刷新驗(yàn)證碼
$("#Yzm").val("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span>
$("#Yzm").focus();//重新聚焦驗(yàn)證碼框
YZM = false;
}
else { //輸入正確時(shí)
$("#Yzm").blur();//綁定驗(yàn)證碼輸入正確時(shí)要做的事
YZM = true;
}
};
附效果圖:

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能
- JSP實(shí)現(xiàn)登錄功能之添加驗(yàn)證碼
- JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在,驗(yàn)證碼倒計(jì)時(shí))
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
- 基于JavaScript短信驗(yàn)證碼如何實(shí)現(xiàn)
- js實(shí)現(xiàn)簡(jiǎn)單的驗(yàn)證碼
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- Jsp生成頁面驗(yàn)證碼的方法[附代碼]
- JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
- 原生js實(shí)現(xiàn)驗(yàn)證碼功能
相關(guān)文章
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(五):經(jīng)典KMP算法
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(五):經(jīng)典KMP算法,本文詳解了KMP算法的方方面在,需要的朋友可以參考下2015-06-06
PHP抓取HTTPS內(nèi)容和錯(cuò)誤處理的方法
這篇文章主要介紹了PHP抓取HTTPS內(nèi)容的實(shí)現(xiàn)方法,以及在抓取的時(shí)候遇到的一個(gè)HTTPS問題的處理辦法,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-09-09
微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例
最近在做一個(gè)列表的時(shí)候,涉及到時(shí)間格式化操作。本文主要介紹了微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例,分享給大家,感興趣的可以了解一下2021-07-07
微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能
這篇文章主要介紹了微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
微信小程序wx.navigateTo中events屬性實(shí)現(xiàn)頁面間通信傳值,數(shù)據(jù)同步
這篇文章主要介紹了微信小程序wx.navigateTo中events屬性實(shí)現(xiàn)頁面間通信傳值,數(shù)據(jù)同步,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
js自定義鼠標(biāo)右鍵的實(shí)現(xiàn)原理及源碼
這篇文章主要介紹了js自定義鼠標(biāo)右鍵的實(shí)現(xiàn)原理及源碼,需要的朋友可以參考下2014-06-06

