快捷導(dǎo)航

JS生成登錄驗證碼的實現(xiàn)示例

更新時間：2023年12月05日 08:24:31 作者：風(fēng)與烈酒

本文主要介紹了JS生成登錄驗證碼的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

采用js生成登錄的驗證碼

采用的技術(shù)點有html，css，JS，jQuery

HTML：

<div class="box_b">
			<img src="./img/0775639c-c82c-4a29-937f-d2a3bae5151a.png" alt="">
			<div class="register">
				<h1>登錄</h1>
				<div class="register_r">
					<span>賬號:</span>
					<input type="text" placeholder="請輸入您的賬號">
				</div>
				<div class="register_r">
					<span>密碼:</span>
					<input type="password" placeholder="請輸入您的密碼" >
				</div>
				<div class="register_e">
					<span>驗證碼:</span>
					<input type="text" placeholder="請輸入驗證碼驗證">
					<canvas id="c1" width="100" height="35" style="border:1px solid black"></canvas>
				</div>
				<div class="register_g">
					<input type="checkbox">
					<span>記住賬號密碼</span>
				</div>
				<button class="register_i">登錄</button>
			</div>
		</div>

css：

.box_b {
	width: 100%;
	height: 450px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-around;
}

.box_b img {
	width: 500px;
	height: 550px;
}

.register {
	width: 480px;
	height: 400px;
	background-color: #E0E0EF;
	margin-top: 50px;
}


.register h1 {
	text-align: center;
	line-height: 80px;
}

.register span {
	font-size: 20px;
}

.register_r {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	line-height: 60px;
	text-align: center;
	align-items: center;
}

.register_r input {
	width: 300px;
	height: 35px;
	outline: none;
	padding-left: 10px;
	border: none;
}

.register_e {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	line-height: 60px;
	text-align: center;
	align-items: center;
}

.register_e input {
	width: 140px;
	height: 35px;
	outline: none;
	padding-left: 10px;
	border: none;
	margin-right: 30px;
}

.register_g {
	display: flex;
	align-items: center;
	margin-left: 40px;
}

.register_g input {
	width: 20px;
	height: 20px;
	margin-right: 7px;

}

.register_i {
	background-color: #298DFB;
	width: 84%;
	line-height: 50px;
	color: #fff;
	margin-top: 5%;
	border-radius: 5px;
	text-align: center;
	margin-left: 8%;
	border: 1px #E4E7ED ridge;
	font-size: 20px;
	cursor: pointer;
}

#c1 {
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
	margin-right: 10px;
}

JS：

$(function() {
	// 存放隨機的驗證碼
	var showNum = []

	draw(showNum)

	$("#c1").click(function() {
		draw(showNum)
	})
	$(".register_i").click(function() {
		var s = $("#inputValue").val().toLowerCase()
		var s1 = showNum.join("")
		if (s == s1) {
			alert("提交成功")
		} else {
			alert("驗證碼錯誤")
		}
		draw(showNum)
	})


	// 封裝一個把隨機驗證碼放在畫布上
	function draw(showNum) {
		// 獲取canvas
		var canvas = $("#c1")
		var ctx = canvas[0].getContext("2d")
		// 獲取畫布的寬高
		var canvas_width = canvas.width()
		var canvas_height = canvas.height()
		//  清空之前繪制的內(nèi)容
		// 0,0清空的起始坐標(biāo)
		// 矩形的寬高
		ctx.clearRect(0, 0, canvas_width, canvas_height)
		// 開始繪制
		var scode =
			"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,1,2,3,4,5,6,7,8,9,"
		var arrCode = scode.split(",")
		var arrLength = arrCode.length
		for (var i = 0; i < 4; i++) {
			var index = Math.floor(Math.random() * arrCode.length)
			var txt = arrCode[index] //隨機一個字符
			showNum[i] = txt.toLowerCase() //轉(zhuǎn)化為小寫存入驗證碼數(shù)組
			// 開始控制字符的繪制位置
			var x = 10 + 20 * i //每一個驗證碼繪制的起始點x坐標(biāo)
			var y = 20 + Math.random() * 8 // 起始點y坐標(biāo)

			ctx.font = "bold 20px 微軟雅黑"
			// 開始旋轉(zhuǎn)字符
			var deg = Math.random * -0.5
			// canvas 要實現(xiàn)繪制內(nèi)容具有傾斜的效果，必須先平移，目的是把旋轉(zhuǎn)點移動到繪制內(nèi)容的地方
			ctx.translate(x, y)
			ctx.rotate(deg)
			// 設(shè)置繪制的隨機顏色
			ctx.fillStyle = randomColor()
			ctx.fillText(txt, 0, 0)

			// 把canvas復(fù)原
			ctx.rotate(-deg)
			ctx.translate(-x, -y)

		}
		for (var i = 0; i < 30; i++) {
			if (i < 5) {
				// 繪制線
				ctx.strokeStyle = randomColor()
				ctx.beginPath()
				ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
				ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
				ctx.stroke()
			}
			// 繪制點
			ctx.strokeStyle = randomColor()
			ctx.beginPath()
			var x = Math.random() * canvas_width
			var y = Math.random() * canvas_height
			ctx.moveTo(x, y)
			ctx.lineTo(x + 1, y + 1)
			ctx.stroke()
		}
	}

	// 隨機顏色
	function 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},$)`
	}
})

到此這篇關(guān)于JS生成登錄驗證碼的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)JS生成登錄驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: