html

<!-- 圖形驗證碼 --><div class="phone"><div class="phones"><div class="img"><img src="./img/yanzhnegma.png" alt=""></div><div class="input"><input type="number" name="" id="" placeholder="圖形驗證碼"></div></div><div class="yan"><div class="code" id="codes" onclick="createCode()"></div></div></div>

js

<script type="text/javascript">var code;window.onload = function css() {createCode();}function createCode() {code = "";var codeLength = 4; //驗證碼的長度var codes = document.getElementById("codes");var charNum= new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //隨機數(shù)（包括中文）for (var i = 0; i < codeLength; i++) {var Name = Math.floor(Math.random() * 52);code += charNum[Name];}if (codes) {codes.className = "code";codes.innerHTML = code;}} </script>

css

.phone {width: 90%;height: 40px;margin: auto;border-radius: 20px;background: #40B450;display: flex;align-items: center;margin-top: 20px;}.phones {width: 76%;display: flex;}.yan {width: 80px;height: 40px;background: #B3E1B9;color: #178226;font-size: 14px;display: flex;align-items: center;justify-content: center;border-radius: 0 20px 20px 0;}.code {font-style: italic;color: #178226;font-size: 16px;padding: 2px 3px;letter-spacing: 3px;font-weight: bolder;line-height: 60px;text-align: center;}

總結(jié)

以上是生活随笔為你收集整理的js实现图形验证码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。