随机数验证码
由字母和數字組成的驗證碼，點擊驗證碼圖片或者換一張時驗證碼會隨機生成。
程序解讀
效果演示
原始樣式
點擊驗證碼圖片或者換一張字樣時隨機生成新的驗證碼
輸入錯誤驗證碼
輸入正確驗證碼
在程序正式開始之前**注意**：要引入兩個架包
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/verify.js"></script>代碼演示
<!DOCTYPE html> <html lang="zh-cn"><head><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/verify.js"></script></head><style>/*常規驗證碼*/.verify-code {font-size: 20px;text-align: center;cursor: pointer;margin-bottom: 5px;border: 1px solid #ddd;}.verify-input-area {float: left;width: 60%;padding-right: 10px;}.verify-change-area {line-height: 30px;float: left;}.varify-input-code {display:inline-block; width: 100%;height: 25px;}.verify-change-code {color: #337AB7;cursor: pointer;}.verify-btn {width: 200px;height: 30px;background-color: #337AB7;color:#FFFFFF;border:none;margin-top: 10px;}</style><body><div id="number"></div><button type="button" id="check-btn" class="verify-btn">確定</button></body><script type="text/javascript">$('#number').codeVerify({type: 1,width: '400px',height: '50px',fontSize: '30px',codeLength: 6,btnId: 'check-btn',ready: function() {},success: function() {alert('驗證匹配！');},error: function() {alert('驗證碼不匹配！');}});</script> </html>總結
- 上一篇： 考研规划计算机科学与技术,2021考研：
- 下一篇： c语言 bool_程序的数据要放到哪里呢