纯前端生成验证码

ゝ一世哀愁。 2022-10-12 15:58 188阅读 0赞

### 纯前端生成验证码 ###

**生成验证码的方法：**

**生成验证码随机背景颜色：**

function code_randomColor() {
         //得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

**在html中引用：**

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>jQuery canvas验证码</title>
    		<style type="text/css">
    			* {
          
    				margin: 0;
    				padding: 0;
    				Box-sizing: border-Box;
    			}
    			html {
          
    				width: 100%;
    				height: 100%;
    				font-size: 16px;
    			}
    			body {
          
    				width: 100%;
    				height: 100%;
    				-moz-user-select: none;
    				/*火狐*/
    				/*禁止用户在页面选择文字*/
    				-webkit-user-select: none;
    				/*webkit浏览器*/
    				-ms-user-select: none;
    				/*IE10*/
    				-khtml-user-select: none;
    				/*早期浏览器*/
    				user-select: none;
    			}
    			.code {
          
    				padding-top: 50px;
    				width: 400px;
    				margin: 0 auto;
    			}
    			.input-val {
          
    				width: 295px;
    				background: #ffffff;
    				height: 2.8rem;
    				padding: 0 2%;
    				border-radius: 5px;
    				border: none;
    				border: 1px solid rgba(0,.2);
    				font-size: 1.0625rem;
    			}
    			#canvas {
          
    				float: right;
    				display: inline-block;
    				border: 1px solid #ccc;
    				border-radius: 5px;
    				cursor: pointer;
    			}
    			.btn {
          
    				width: 100px;
    				height: 40px;
    				background: #f1f1f1;
    				border: 1px solid #ccc;
    				border-radius: 5px;
    				margin: 20px auto 0;
    				display: block;
    				font-size: 1.2rem;
    				color: #e22e1c;
    				cursor: pointer;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="code">
    			<input type="text" value="" placeholder="验证码" class="input-val" />
    			<canvas id="canvas" width="100" height="43"></canvas>
    			<button class="btn">提交</button>
    		</div>
    	</body>