驗證碼功能是現在網站開發中非常常見的一種功能，常見的編程語言，比如.NET,JAVA都能很容易實現驗證碼功能，今天我準備分享一個使用JS實現驗證碼的功能，非常簡單使用，拿來就可以用，廢話不多說，直接上傳代碼！

JS代碼：

//生成驗證碼 var code = ""; function createCode(e) {code = "";var codeLength = 4;var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');for (var i = 0; i < codeLength; i ) {var charIndex = Math.floor(Math.random() * 60);code = selectChar[charIndex];}if (code.length != codeLength) {createCode(e);}if (canGetCookie == 1) {setCookie(e, code, 60 * 60 * 60, '/');} else {return code;} } 存儲驗證碼到Cookie:

//hours為空字符串時,cookie的生存期至瀏覽器會話結束。 //hours為數字0時,建立的是一個失效的cookie, //這個cookie會覆蓋已經建立過的同名、同path的cookie（如果這個cookie存在）。 function setCookie(name, value, hours, path) {var name = escape(name);var value = escape(value);var expires = new Date();expires.setTime(expires.getTime() hours * 3600000);path = path == "" ? "" : ";path=" path;_expires = (typeof hours) == "string" ? "" : ";expires=" expires.toUTCString();document.cookie = name "=" value _expires path; } 從Cookie獲取驗證碼：

//cookie名獲取值 function getCookieValue(name) {var name = escape(name);//讀cookie屬性，這將返回文檔的所有cookie var allcookies = document.cookie;//查找名為name的cookie的開始位置 name = "=";var pos = allcookies.indexOf(name);//如果找到了具有該名字的cookie，那么提取并使用它的值 if (pos != -1) { //如果pos值為-1則說明搜索"version="失敗 var start = pos name.length; //cookie值開始的位置 var end = allcookies.indexOf(";", start); //從cookie值開始的位置起搜索第一個";"的位置,即cookie值結尾的位置 if (end == -1) end = allcookies.length; //如果end值為-1說明cookie列表里只有一個cookie var value = allcookies.substring(start, end); //提取cookie的值 return unescape(value); //對它解碼 }else return "-1"; //搜索失敗，返回-1 } 前端使用：

1.html代碼：

<div class='validation' style="opacity: 1; right: -5px;top: -3px;"><canvas class="J_codeimg" id="myCanvas" onclick="Code();">對不起，您的瀏覽器不支持canvas，請下載最新版瀏覽器!</canvas></div> 2.JS代碼：

Code();function Code() {showCheck(createCode("test"));}function showCheck(a) {CodeVal = a;var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.clearRect(0, 0, 1000, 1000);ctx.font = "80px 'Hiragino Sans GB'";ctx.fillStyle = "#E8DFE8";ctx.fillText(a, 0, 100);}

總結

以上是生活随笔為你收集整理的JS结合Cookie实现验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。