<!Doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>验证码 </title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
			}
			.main_bar{
				width:100%;
				height: 350px;
				margin-top:200px;
			}
			.login_form{
				width:30%;
				height:80%;
				margin:0 auto;
				/*border:2px solid #16A085;*/
				border-radius: 15px;
				padding:10px;
				background: #ECF0F1;
			}
			.name,.pwd,.sbm_btn{
				display:block;
				width:70%;
				margin:0 auto;
				height:35px;
				font-size:16px;
				border-color:transparent;
				border-radius: 5px;
				border:0;
				padding-left:8px;

			}
			.yzm{
				height: 35px;
				margin:0 auto;
				width: 72%;
				line-height: 35px;
				position: relative;
				margin-bottom: 10px;
			}
			.code{
				width:50%;
				height: 35px;
				border:0;
				border-color: transparent;
				font-size:16px;
				border-radius: 5px;
				padding-left: 8px;
			}
			.code_pic{
				display: block;
				width:40%;
				height:35px;
				background-color: #34495e;
				color:#FFF;
				position: absolute;
				top: 0px;
				left:60%;
				border-radius: 5px;
				text-align: center;
			}
			.name{
				margin-top:20px;
			}
			.sbm_btn{
				text-align: center;
				background-color: #1abc9c;
				color:#fff;
				line-height: 35px;
			}
			.re_pwd {
			    width: 25%;
			    margin: 10px auto 10px;
			}
			.re_pwd a{
				text-decoration: none;
				font-size:14px;
				color: #ccc;
			}
			.re_pwd a:hover{
				cursor: pointer;
				color:#16A085;
			}
			.errorTips{
				width:70%;
				color:red;
				font-size: 14px;
				margin:0 auto;
				height: 20px;
				line-height:20px;
			}
		</style>
	</head>

	<body onload="changeImg()">
		<div class="main_bar">
			<div id="login_form" class="login_form">
				<div class="title"></div>
				<form action="login.html">
					<div id="form_widgt">
						<input type="text" name="name" class="name" placeholder="请输入账号""><br>
						<input type="password" name="pwd" class="pwd"  placeholder="请输入密码"><br>
						<p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="验证码">
						<span id="code" class="code_pic" title="看不清，换一张"></span></p>
						<p class="errorTips" id="errorTips"></p>
						<a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登录</a>

					</div>
				</form>
				<div class="re_pwd"><a href="">忘记密码了</a></div>
			</div>
		</div>
		<script type="text/javascript">
			// 声明一个变量用于存储生成的验证码
			document.getElementById('code').onclick = changeImg;
			function changeImg(){
				// 验证码组成库
				var arrays=new Array(
	                '1','2','3','4','5','6','7','8','9','0',
	                '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'
            	);
				// 重新初始化验证码
				code ='';
				// 随机从数组中获取四个元素组成验证码
				for(var i = 0; i<4; i++){
					// 随机获取一个数组的下标
					var r = parseInt(Math.random()*arrays.length);
					code += arrays[r];
				}
				// 验证码写入span区域
				document.getElementById('code').innerHTML = code;

			}

			// 验证验证码
			function check(){
				var error;
				// 获取用户输入的验证码
				var codeInput = document.getElementById('codeInput').value;
				if(codeInput.toLowerCase() == code.toLowerCase()){
					console.log('123');
					return true;
				}else{
					error = '验证码错误，重新输入';
					document.getElementById('errorTips').innerHTML = error;
					return false;
				}
			}
		</script>
	</body>
</html>

来自：http://www.qdfuns.com/notes/36006/cf15d94839a45798f77a58626f0c2059.html

js生成验证码并验证的登录页面的更多相关文章

  1. js生成验证码并验证

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...

  2. js生成验证码并且验证

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  3. JAVA WEB项目中生成验证码及验证实例（附源码及目录结构）

    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...

  4. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  5. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  6. node.js生成验证码及图片

    示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...

  7. js生成验证码并检验

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  8. js生成验证码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js生成验证码并且判断

       <style type="text/css">        .code        {            font-family: Arial;      ...

随机推荐

  1. lvm硬盘管理及LVM扩容

    1,创建分区 [root@host-10-158-172-44 ~]# fdisk /dev/vda Welcome to fdisk (util-linux 2.23.2). Changes wil ...

  2. 【BZOJ 1059】[ZJOI2007]矩阵游戏

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后要求对于所有的i,a[i][i]=1 那么,如果第i行的第j列为1. 就说明我们可以把这个第i行换到第j行. 因为这样的话,a[ ...

  3. unity3d 自己主动文件更新系统

    游戏内容变更之后.一般而言不会想让玩家下载整个游戏包又一次安装,由于这样会流失大量玩家.全部游戏更新是必须的. 更新的内容包含 数据.资源.代码. 基本原理: 1.将须要更新的文件打包成AssetBu ...

  4. &lt;九度 OJ&gt;题目1545：奇怪的连通图

    题目描写叙述: 已知一个无向带权图,求最小整数k.使仅使用权值小于等于k的边,节点1能够与节点n连通. 输入: 输入包括多组測试用例.每组測试用例的开头为一个整数n(1 <= n <= 1 ...

  5. 23.STL容器小结

  6. POJ 3670 DP LIS?

    权值为1~3 好了 此题是水题-- i表示到了第i个数,j表示结尾的数是j f[i][j]=min(f[i][j],f[i-1][k]+(a[i]!=j)) 1<=k<=j 最长上升的. ...

  7. 继承—Music

    public class Instrument { public void play(){ System.out.println("弹奏乐器"); } public class W ...

  8. P1452 Beauty Contes

    题目背景 此处省略1W字^ ^ 题目描述 贝茜在牛的选美比赛中赢得了冠军”牛世界小姐”.因此,贝西会参观N(2 < = N < = 50000)个农场来传播善意.世界将被表示成一个二维平面 ...

  9. 高德地图和canvas画图结合应用(二)

    上节讲述了如在在高德地图中添加canvas图层,这节就讲述下如何在canvas图层添加鼠标的事件. 在上节脚本的最后加入以下代码: var text; $('#container').on('clic ...

  10. RSA不对称加密

    package sinRsa; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io ...