欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)網(wǎng)頁(yè)隨機(jī)驗(yàn)證碼

 更新時(shí)間：2020年10月19日 09:25:54   作者：dweblover  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>隨機(jī)驗(yàn)證碼練習(xí)</title>
<script type="text/javascript">
var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//驗(yàn)證碼中可能包含的字符
function creat(n){
 var b="";//保存生成的驗(yàn)證碼，驗(yàn)證碼是一個(gè)字符串類型
 for(var i=0;i<n;i++)
 { 
 var index=Math.floor(Math.random()*62)//隨機(jī)產(chǎn)生0-62個(gè)之間隨機(jī)數(shù)
 b=b+s.charAt(index);//將隨機(jī)產(chǎn)生的數(shù)字當(dāng)做字符串的下標(biāo)，然后用charAt函數(shù)將它取出來(lái)然后放入b中
 }
 return b;//返回隨機(jī)產(chǎn)生的驗(yà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>

刷新前隨機(jī)碼

刷新后的隨機(jī)碼

2.全選事件

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

 //反選
 //第一步選中事件
 var fx=document.getElementById("checkreverse");
 //第二步綁定事件
 fx.onclick=function()
 {
 q.checked=true;//默認(rèn)是全選/全不選是選中狀態(tài)
 //遍歷四個(gè)多選框
 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）

 //判斷四個(gè)多選框是否是全選，只要一個(gè)沒選中就不是全選
 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;
 }
 };
 //如果四個(gè)多選框全都被選中，則全選/全不選按鈕也應(yīng)該選中
 //如果四個(gè)多選框全都沒被選中，則全選/全不選按鈕也應(yīng)該不選中
 //為四個(gè)多選框分別綁定點(diǎn)擊響應(yīng)事件
 //遍歷四個(gè)多選框
 for(var i=0;i<it.length;i++)
 {
 //為四個(gè)多選框綁定點(diǎn)擊事件
 it[i].onclick=function()
 { q.checked=true;//初始默認(rèn)狀態(tài)為選中狀態(tài)
 for(var j=0;j<it.length;j++)
 //判斷四個(gè)多選框是否是全選，只要一個(gè)沒選中就不是全選
 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>

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

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

相關(guān)文章

  • 淺談DOM的操作以及性能優(yōu)化問題-重繪重排

    淺談DOM的操作以及性能優(yōu)化問題-重繪重排

    下面小編就為大家?guī)?lái)一篇淺談DOM的操作以及性能優(yōu)化問題-重繪重排。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-01-01

    • 最新評(píng)論