這學期剛學的用javascript實現隨機產生驗證碼過程（非圖片驗證碼）

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript指令碼語言（動態切換和驗證碼練習）</title><style type="text/css">*{ margin:0px auto;}#top{ width:960px;}#nav{ background-image:url(../image1/login_head.gif); background-repeat:no-repeat; width:360px; height:25px; margin-top:20px; padding-left:20px; color:#FFF; padding-top:3px;}#main{ width:380px; height:340px; text-align:center; font-size:14px; border:1px #009; background:#09F;}#qqtop1{ float:left; width:100px; height:18px; padding-top:5px;}#qqtop2{ width:280px; height:20px; float:right; }#right{ float:left;}.font{ color:#F0F;font-size:30px;font-family:微軟雅黑; }</style><script type="text/javascript"> function chang(num) {     if(num==1)     {        document.getElementById("qid").style.display="none";        document.getElementById("qqh").style.display="block";        document.getElementById("qqm").style.display="block";          }else     {        document.getElementById("qid").style.display="block";        document.getElementById("qqh").style.display="none";        document.getElementById("qqm").style.display="none";          } }  var str=""; function radom()//顯示驗證碼方法 {    var j=new Array("0","1","2","3","8","9","a","b","c","d");        for(var i=0;i<4;i++)    {        var num=parseInt(Math.random()*j.length);        str+=j[num];        }        document.getElementById("yzm").innerHTML=str;    document.getElementById("yzm").className="font"; }  function gb() {     str="";    radom();      } function ok(){     var yzm=document.getElementById("yzm").innerHTML.toUpperCase();      str=document.getElementById("yz").value;    if(yzm==str.toUpperCase())    {        alert("登入成功！");        }else    {        alert("my god!驗證碼錯誤，請從新輸入！");        gb();        }    }</script>    </head><body onload="radom()"><div id="top"><img src="../image1/top.jpg" /></div><div id="nav">拍拍使用者登入</div><div id="main"><div id="qqtop1">登入方式選擇:</div><div id="qqtop2">  <input type="radio" name="checd" checked="checked" onclick="chang(1)" />QQ號碼登入<input type="radio" name="checd" onclick="chang(0)" />QQ群號登入</div><br/><div id="qqh" style="margin-top:30px;">QQ號碼：<input type="text" />忘記QQ號碼〉〉</div><br/><div id="qid" javascript: style="display:none; padding-right:90px;" >QQ群Id：<input type="text"  /></div><div id="qqm">QQ密碼：<input type="password" />忘記QQ密碼〉〉</div><br/><br/><div  style=" padding-right:90px;" >驗證碼：<input type="text" value="請輸入顯示的文字" id="yz" /></div><br/><div id="qqh" style=" padding-right:110px; color:#00F;"><label onclick="gb()">看不清，換一張</label></div><br/><div style="height:40px; width:100px; background-color:#03F; padding-top:20px; margin-left:100px;" ><label id="yzm"></label></div><br/><input type="button" value="登&nbsp;&nbsp;錄" style="background-color:#03F; padding-top:5px; margin-right:80px; height:30px; width:100px" onclick="ok()" /></div></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More