JS笔记-前端实现验证码功能
生活随笔
收集整理的這篇文章主要介紹了
JS笔记-前端实现验证码功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
程序運行截圖如下：
當輸入錯誤驗證碼點擊登錄后
輸入正確驗證碼后，就可以跳轉了。
這里主要是使用JS生成了驗證碼
?
程序結構如下
源碼如下：
vail.js
//高、寬、字符大小、字符集 var w = 80; var h = 24; var fontsize = h - 6; var str = "0123456789abcdefABCDEF";function randInt(max) {return Math.floor(Math.random() * 100000 % max); }//生成隨機長度字符串 function randCode(len) {if(len < 4){len = 4;}var code = "";for(var i = 0; i < len; i++){code += str.charAt(randInt(str.length));}return code; }function randColor() {var r = randInt(256);var g = randInt(256);var b = randInt(256);return "rgb(" + r +"," + g + "," + b + ")"; }//繪制圖片 function drawCode(canvas) {var valiCode = randCode(8);w = 5 + fontsize * valiCode.length;if(canvas != null && canvas.getContext && canvas.getContext("2d")){//設置顯示區域大小canvas.style.width = w;//設置畫板高度canvas.setAttribute("width", w);canvas.setAttribute("height", h);//得到畫筆var pen = canvas.getContext("2d");//繪制背景pen.fillStyle = "rgb(255, 255, 255)";pen.fillRect(0, 0, w, h);//設置水平位置pen.textBaseline = "top"; //middle, bottom//繪制內容for(var i = 0; i < valiCode.length; i++){pen.fillStyle = randColor();pen.font = "bold " + (fontsize + randInt(3)) + "px 微軟雅黑";pen.fillText(valiCode.charAt(i), 5 + fontsize * i, randInt(5));}//繪制噪音線for(var i = 0; i < 2; i++){pen.moveTo(randInt(w) / 2, randInt(h));pen.lineTo(randInt(w), randInt(h));pen.strokeStyle = randColor();pen.lineWidth = 2;pen.stroke();}return valiCode;} }web.xml
<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Application</display-name> </web-app>index.jsp
<%--Created by IntelliJ IDEA.User: cffDate: 2020/1/30Time: 23:06To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>Title</title> </head> <body> <h1>SUCCESS</h1> </body> </html>jsVail.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>js</title><style type="text/css">.code_a{color: #0000ff;font-size: 12px;text-decoration: none;cursor: pointer;}#cvs{cursor: pointer;}</style><script src="js/vail.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var valicode;function changeCode(){var cvs = document.getElementById("cvs");valicode = drawCode(cvs);}function valiCode(){var code = document.getElementById("inCode").value;if(code.toLowerCase() == valicode.toLowerCase()){return true;}else{document.getElementById("err").innerHTML = "輸入的驗證碼錯誤！";changeCode();return false;}}window.onload = changeCode;</script> </head><body> <form action="index.jsp" method="post"><label>驗證碼：</label><input type="text" id="inCode" name="inCode" /><canvas id="cvs" onclick="changeCode()"></canvas><a class="code_a" onclick="changeCode()">換一張</a><br/><input type="submit" value="登錄" onclick="return valiCode()" /> </form> <div style="color:red" id="err"></div> </body> </html>porn.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>vailJavaScript</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging></project>?
總結
以上是生活随笔為你收集整理的JS笔记-前端实现验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java Socket笔记-udpSoc
- 下一篇： Web前端笔记-通过Thymeleaf把