# 自動隨機生成驗證碼 ``` <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode"></span> <a id="linkbt">看不清換一張</a> </div> <div class="input_code"> <label for="inputCode">驗證碼：</label> <input type="text" id="inputCode" /> <span id="text_show"></span> </div> <input id="Button1" type="button" value="確定" /> </div> <script> // 1.生成驗證碼 // 6位數 0-9 a-f 隨機生成6位 內容必須是0-9 a-f 字符串 // 數組 下標 0、1、2…… 從數組當中 隨機下標 0-15位 // 2.進行驗證 點擊確定時，進行對比 window.onload = function(){ var res = getCode(); function getCode(){ var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; var str = ''; for(var i = 0;i<6;i++){ var num = Math.round(Math.random()*(15-0)+0); str += arr[num]; } return str; } document.getElementById('checkCode').innerText = res; // 點擊事件 document.getElementById('linkbt').onclick = function(){ document.getElementById('checkCode').innerText = getCode(); } // 提交進行對比 document.getElementById('Button1').onclick = function(){ var code = document.getElementById('checkCode').innerText; var inputCode = document.getElementById('inputCode').value; if(code != inputCode){ alert('您輸入的驗證碼不正確'); document.getElementById('inputCode').value = ''; return false; } } } </script> <style> .v_code { width: 600px; margin: 0 auto; } .v_code>input { width: 60px; height: 36px; margin-top: 10px; } .code_show { overflow: hidden; } .code_show span { display: block; float: left; margin-bottom: 10px; } .code_show a { display: block; float: left; margin-top: 10px; margin-left: 10px; } .code { font-style: italic; background-color: #f5f5f5; color: blue; font-size: 30px; letter-spacing: 3px; font-weight: bolder; float: left; cursor: pointer; padding: 0 5px; text-align: center; } #inputCode { width: 100px; height: 30px; } a { text-decoration: none; font-size: 12px; color: #288bc4; cursor: pointer; } a:hover { text-decoration: underline; } .form{ width: 300px; height: 300px; background-color: #eee; } </style> ``` 效果圖：