H5+css3+js搭建带验证码的登录页面
作者:hoho_12 发布时间:2023-08-30 16:15:54
标签:js,验证码,登录
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下
login.html
<!DOCTYPE HTML>
<html>
<head>
<title>EasyBuy后台管理系统</title>
<meta charset="utf-8">
<style>
.main_bar{
width:1350px;
height:350px;
background-color:#6495ED;
margin-top:10%;
}
#login_form{
width:40%;
height:100%;
background-color:#112435;
margin:0 auto;
}
.title{
width:100%;
height:55px;
color:#ffffff;
border-bottom:1px solid #ffffff;
font-size:20pt;
font-family:"微软雅黑";
line-height:55px;
text-align:center;
}
#form_widget{
width:100%;
height:295px;
background-color:#808080;
}
.txt{
display:block;/*设置为独立块(换行)*/
width:70%;
margin:0 auto;
height:35px;
font-size:15pt;
border-radius:5px;/*设置圆角样式*/
border:0;
padding-left:8px;
}
#vcode{
height:35px;
width:40%;
font-size:15pt;
margin-left:15%;
border-radius:5px;
border:0;
padding-left:8px;
}
#code{
color:#ffffff;/*字体颜色白色*/
background-color:#000000;
font-size:20pt;
font-family:"华康娃娃体W5";
padding:5px 35px 10px 35px;
margin-left:5%;
cursor:pointer;
}
#search_pass_link{
width:70%;
text-align:right;
margin:0 auto;
padding:5px;
}
/*层级选择器*/
#search_pass_link a{
color:#000000;
text-decoration:none;
}
/*伪类*/
#search_pass_link a:hover{
color:#ff0000;
text-decoration:underline;
}
.btn{
width:70%;
margin-left:15%;
height:40px;
border:0;
font-size:14pt;
font-family;"微软雅黑";
background-color:#FC5628;
color:#ffffff;
cursor:pointer;/*设置指针鼠标的样式*/
border-radius:20px;/*设置圆角样式*/
border:0;
}
#copyright{
width:100%;
text-align:center;
padding-top:20px;
font-family:"微软雅黑";
color:#e0e0e0;
}
</style>
</head>
<body leftmargin="0" οnlοad="changeImg()">
<div class="main_bar">
<div id="login_form">
<div class="title">
EasyBuy系统登录
</div>
<form action="main.html" οnsubmit="return check()">
<div id="form_widget">
<br>
<input type="text" placeholder="请输入账号" id="box_name" class="txt" value="用户名" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='用户名'"/>
<br>
<input type="password" placeholder="请输入密码" id="box_pass" class="txt" value="password" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='password'"/>
<br>
<input type="text" id="vcode" placeholder="验证码" value="验证码" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='验证码'"/><span id="code" title="看不清,换一张"></span>
<div id="search_pass_link">
<a href="#" rel="external nofollow" >忘记密码?</a>
</div>
<input type="submit" value="登录" class="btn" οnmοuseοver="this.style.backgroundColor='#FF8D00'" οnmοuseοut="this.style.backgroundColor='#FC5628'">
<br>
<div id="copyright">
Power By WXH ©CopyRight 2016
</div>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var code;//声明一个变量用于存储生成的验证码
document.getElementById("code").οnclick=changeImg;
function changeImg(){
//alert("换图片");
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='';//重新初始化验证码
//alert(arrays.length);
//随机从数组中获取四个元素组成验证码
for(var i=0;i<4;i++){
//随机获取一个数组的下标
var r=parseInt(Math.random()*arrays.length);
code+=arrays[r];
//alert(arrays[r]);
}
//alert(code);
document.getElementById('code').innerHTML=code;//将验证码写入指定区域
}
//效验验证码(表单被提交时触发)
function check(){
//获取用户输入的验证码
var input_code=document.getElementById('vcode').value;
//alert(input_code+"----"+code);
if(input_code.toLowerCase()==code.toLowerCase())
{
//验证码正确(表单提交)
return true;
}
alert("请输入正确的验证码!");
//验证码不正确,表单不允许提交
return false;
}
</script>
</html>
来源:https://blog.csdn.net/hoho_12/article/details/51234777
0
投稿
猜你喜欢
- 或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的
- 通常情况下,即使MyISAM表格式非常可靠(SQL语句对表做的所有改变在语句返回之前被写下),如果下列任何事件发生,你依然可以获得损坏的表:
- '/***' 作 者 :冻结回忆'修改时间:2007-10-17'功能说明
- Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度
- 这篇文章主要介绍了Python读取表格类型文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 随着互联网的快速发展和数据交换的广泛应用,各种数据格式的处理成为软件开发中的关键问题。JSON 作为一种通用的数据交换格式,在各种应用场景中
- 某些情况下:我们希望在一个SQL Server下访问另一个sqlserver数据库上的数据,或者访问其他oracle数据库上的数据,要想完成
- <%'解析一个xml文件的公用函数集合dim document'装载一个xml文档,函数名Loaddocument(文
- 从前有三只小猪,长大自立了分别造房子住。老大搬来草堆堆出草屋,老二搬来木头搭出木屋,老三搬来砖头,砌墙,造烟囱,造出了坚固的砖房。一天晚上大
- 这是我上一篇关于安全的文章的其中一节。这是一个众所周知的事实,对你运行中的网站的MySQL数据库备份是极为重要的只需按照下面3步做,一切都在
- SELECT语句具有种类繁多的各类选项,这些选项可以用来控制数据返回的方式。这些选项以子句、关键词和函数的形式存在。 子句是一种修改结果的语
- ORA-01578:Oracle data block corrupted(file # num,block # num)产生原
- HTTP_X_FORWARDED_FOR与REMOTE_ADDR的区别.在Request.ServerVariables中并没有HTTP_X
- 一、 在数据库排序查询优化上的差异。在讲解这个内容之前,为了读者能够清楚我讲的内容,我要先谈一个概念。命中率,它是指从内存中取得数据而不从磁
- 整理了一些JS的常用方法,包括验证啊,全选反选啊,ajax请求啊之类的,因为就是自己用的,写的都比较简单,就算抛砖引玉吧,喜欢的就拿去,不喜
- 1. 关于上传图片失败的问题首先导入jar包 commons-fileupload-1.2.2.jar,ueditor.jar然后修改edi
- 昨天在网上看到一个防采集软件,说采集只访问当前网页,不会访问网页的图片、JS等,今天突然想到,通过动态程序和Js访问分别记录访问者的IP,然
- 如何用数据库制作一个多用户版的计数器?代码和说明如下:count.asp' 计数器的核心程序<%Set c
- 今日一同时问我,new Date(Date(str))这段代码什么意思?我一看就晕了,一个new Date 一个Date这是什么意思?这函数
- 这个分页使用的是0游标,也就是Rs.Open Sql,Conn,0,1。但是感觉也快不了多少,10万条数据的分页时间300多豪秒之间。代码如