快捷導(dǎo)航

js實現(xiàn)網(wǎng)頁隨機驗證碼

更新時間：2020年10月19日 09:25:54 作者：dweblover

這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)網(wǎng)頁隨機驗證碼的具體代碼，供大家參考，具體內(nèi)容如下

1、現(xiàn)在全選網(wǎng)站為了防止用戶利用機器人自動注冊、登錄、灌水，采用了驗證碼技術(shù)。所謂驗證碼，就是系統(tǒng)將一串隨機產(chǎn)生的數(shù)字或符號，生成一幅圖片，圖片里加入一些千擾象素(防止OCR)的驗證信息。這驗證碼信息由用戶肉眼識別后，將其輸入到表單中并提交網(wǎng)站驗證，只有驗證成功后用戶才能使用系統(tǒng)提供的某項功能。
隨機產(chǎn)生一個由n位數(shù)字和字母組成的驗證碼(本例題為4位），單擊[刷新]按鈕，重新產(chǎn)生驗證碼。

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>隨機驗證碼練習(xí)</title>
<script type="text/javascript">
var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//驗證碼中可能包含的字符
function creat(n){
 var b="";//保存生成的驗證碼，驗證碼是一個字符串類型
 for(var i=0;i<n;i++)
 { 
 var index=Math.floor(Math.random()*62)//隨機產(chǎn)生0-62個之間隨機數(shù)
 b=b+s.charAt(index);//將隨機產(chǎn)生的數(shù)字當(dāng)做字符串的下標，然后用charAt函數(shù)將它取出來然后放入b中
 }
 return b;//返回隨機產(chǎn)生的驗證碼
}
function show()
{
 document.getElementById("yzm").innerHTML=creat(4);
 
};
window.onload=show;
</script>
</head>
<body>
<span id="yzm"></span>
<input type="button" value="刷新" onClick="show()">
</body>
</html>

刷新前隨機碼

刷新后的隨機碼

2.全選事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全選練習(xí)</title>
<script type="text/javascript">
window.onload=function()
{
 
 //將四個多選框,以及全選/全不選設(shè)置為全局變量
 var it=document.getElementsByName("ites");
 var q=document.getElementById("checkallbox");
 //全選按鈕（點擊按鈕以后四個多選框全都被選中）
 //第一步選中事件
 var all=document.getElementById("checkall");
 //第二步綁定事件
 all.onclick=function()
 {
 
 //第三步書寫事件驅(qū)動程序（設(shè)置四個多選框為選中狀態(tài)）
 //遍歷四個多選框
 for(var i=0;i<it.length;i++)
 {
 it[i].checked=true;//通過checked的屬性來設(shè)置是否被選中（true選中，false不選）
 }
 q.checked=true;//全選后將全選/全不選設(shè)置為true
 };
 //全不選按鈕（點擊按鈕以后四個多選框全不被選中）
 //第一步選中事件
 var no=document.getElementById("checkno");
 //第二步綁定事件
 no.onclick=function()
 {
 
 //遍歷四個多選框
 for(var i=0;i<it.length;i++)
 {
 it[i].checked=false;//通過checked的屬性來設(shè)置是否被選中（true選中，false不選）
 }
 q.checked=false;//全不選后將全選/全不選設(shè)置為false
 };

 //反選
 //第一步選中事件
 var fx=document.getElementById("checkreverse");
 //第二步綁定事件
 fx.onclick=function()
 {
 q.checked=true;//默認是全選/全不選是選中狀態(tài)
 //遍歷四個多選框
 for(var i=0;i<it.length;i++)
 {
 if(it[i].checked)
  it[i].checked=false;//如果是選中狀態(tài)則改成不選中
 else
  it[i].checked=true; //否則相反（也可以if-else改寫成it[i].checked=!it[i].checked）

 //判斷四個多選框是否是全選，只要一個沒選中就不是全選
 if(it[i].checked==false)
 {
 q.checked=false;
 
 }
 
 }
 
 };
 //提交
 var tj=document.getElementById("checksend");
 tj.onclick=function()
 {
 
 for(var i=0;i<it.length;i++)
 {
 if(it[i].checked)
  alert(it[i].value);
 }
 
 };
 q.onclick=function()
 {
 for(var i=0;i<it.length;i++)
 {
 it[i].checked=q.checked;
 }
 };
 //如果四個多選框全都被選中，則全選/全不選按鈕也應(yīng)該選中
 //如果四個多選框全都沒被選中，則全選/全不選按鈕也應(yīng)該不選中
 //為四個多選框分別綁定點擊響應(yīng)事件
 //遍歷四個多選框
 for(var i=0;i<it.length;i++)
 {
 //為四個多選框綁定點擊事件
 it[i].onclick=function()
 { q.checked=true;//初始默認狀態(tài)為選中狀態(tài)
 for(var j=0;j<it.length;j++)
 //判斷四個多選框是否是全選，只要一個沒選中就不是全選
 if(it[j].checked==false)
 {
 q.checked=false;
 break;//一旦為假就退出
 
 }
 };
 }
 
};
</script>
</head>
<body>
<form method="post" action="">
你喜歡的明星有?<input type="checkbox" id="checkallbox">全選/全不選
<br/>
<input type="checkbox" name="ites" value="趙麗穎">趙麗穎
<input type="checkbox" name="ites" value="楊冪">楊冪
<input type="checkbox" name="ites" value="楊洋">楊洋
<input type="checkbox" name="ites" value="易烊千璽">易烊千璽
<br/>
<input type="button" value="全選" id="checkall">
<input type="button" value="全不選" id="checkno">
<input type="button" value="反選" id="checkreverse">
<input type="button" value="提交" id="checksend">
</form>
</body>
</html>

效果圖如下（可以將每一個按鈕都試一下呦）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
驗證碼

相關(guān)文章

JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果,可實現(xiàn)橫向與縱向箭頭的形式標識選中菜單項位置的功能,涉及javascript針對頁面元素位置的判定與樣式動態(tài)操作技巧,需要的朋友可以參考下
2015-08-08
JS實現(xiàn)基于拖拽改變物體大小的方法
這篇文章主要介紹了JS實現(xiàn)基于拖拽改變物體大小的方法,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-01-01
JavaScript判斷變量是否為空的自定義函數(shù)分享
這篇文章主要介紹了JavaScript判斷變量是否為空的自定義函數(shù)分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下
2015-01-01
js實現(xiàn)的類似QQ的等級的代碼
類似QQ等級
2008-09-09
JavaScript 正則表達式中g(shù)lobal模式的特性
這篇文章主要介紹了JavaScript 正則表達式中g(shù)lobal模式的特性的相關(guān)資料,需要的朋友可以參考下
2016-02-02
javascript結(jié)合Flexbox簡單實現(xiàn)滑動拼圖游戲
本文給大家分享的是一則使用javascript結(jié)合Flexbox簡單實現(xiàn)滑動拼圖游戲的代碼，雖然沒有實現(xiàn)完整的功能，但是還是推薦給大家，喜歡的朋友可以繼續(xù)做完
2016-02-02
javascript如何返回字符串的所有排列
這篇文章主要介紹了javascript如何返回字符串的所有排列問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
微信小程序 Storage更新詳解
這篇文章主要介紹了微信小程序 Storage更新詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
這篇文章主要為大家詳細介紹了JavaScript的面向?qū)ο?，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03