<!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. [SDOI2008]郁闷的小J（分块）

    [SDOI2008]郁闷的小J 题目描述 小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的危 ...

  2. python 退出程序的执行

    使用sys.exit()退出当前程序的执行 import sys if x==0: sys.exit()

  3. 关于ValueAnimation以及Interpolator +Drawable实现的自己定义动画效果

    ValueAnimation : Android中的属性动画,他跟objectAnimation是比补间动画拥有更强大的功能,能够操作对象.所以我们能够在自 定义View中通过他们来实现些特别的功能. ...

  4. 第九章 TCP和UDP同一时候用复用一个port实现一个回射server

    #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include &l ...

  5. 纯CSS实现小圆点和三角形图案

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. ，典型递归问题-F(1025）mod 5 的值

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  7. IP address could not be resolved: Temporary failure in name resolution

    今早发现mysql日志中有非常多例如以下的警告: 140724 18:41:25 [Warning] IP address '172.16.18.217' could not be resolved: ...

  8. bzoj1497: [NOI2006]最大获利（最大权闭合子图）

    1497: [NOI2006]最大获利 题目:传送门 题解: %%%关于最大权闭合子图很好的入门题 简单说一下什么叫最大权闭合子图吧...最简单的解释就是正权边连源点,负权边连汇点(注意把边权改为正数 ...

  9. php中file_get_contents如何读取大容量文件

    php中file_get_contents如何读取大容量文件 一.总结 一句话总结:使用file_get_contents()进行分段读取,file_get_contents()函数可以分段读取 1. ...

  10. python-logging写日志编码问题

    python-logging写日志编码问题 标签(空格分隔): python 修改logging.FileHandler() 指定编码格式为:utf8 重新运行