H5+css3+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 &copy;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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现登录验证码

    Js代码: /** * 验证码 */ function yzm(){ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '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',

  • js实现登录注册框手机号和验证码校验（前端部分）

    开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

  • JSP实现登录功能之添加验证码

    jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.Java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i

  • JavaScript登录验证码的实现

    废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec

  • JSP + Servlet实现生成登录验证码示例

    JSP + Servlet实现生成登录验证码示例

    随机生成四位数验证码,包括汉字,数字,英文大小写. 1.Servlet类 package servlet; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.AffineTransform; import java.awt.geom.Line2D; i

  • H5+css3+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:#

  • 五个基于JS实现的炫酷登录页面

    五个基于JS实现的炫酷登录页面

    目录 1.炫酷星空登录 2.动态云层登录 3.深海灯光水母登录 4.炫酷蛛网登录 5.彩色气泡登录 1.炫酷星空登录 实现代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>运营系统登录页</title> <link href=

  • 使用jQuery如何写一个含验证码的登录界面

    使用jQuery如何写一个含验证码的登录界面

    一个包含用户名,密码,验证码的简单的登陆界面,如下图所示: 首先是 HTML 代码: <div id="divID"> <div style="background-color:transparent;"> <form id="ff" method="post"> <ul class="reg-box"> <li> <label for=&q

  • Servlet+JDBC实现登陆功能的小例子(带验证码)

    案例需求:访问带有验证码的登录页面login.jsp用户输入用户名,密码以及验证码.如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误如果验证码输入有误,跳转登录页面,提示:验证码错误如果全部输入正确,则跳转到主页success.jsp,显示:用户名,欢迎您分析 步骤 文件树展示 1.配置文件和jar包在上个案例均有配置过,需要改的有:User类新增验证码成员变量,数据库增加了一个验证码字段(无用,只是为了UserDao包把查找到的数据值导入到User类不出错). 2.登陆界面 <%

  • Bootstrap实现前端登录页面带验证码功能完整示例

    本文实例讲述了Bootstrap实现前端登录页面带验证码功能.分享给大家供大家参考,具体如下: Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css.js在使用前要在开头引入 上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 告诉浏览器网页所识别的文件类型及语言类型 --> <meta http-equiv="X-

  • 【JS+CSS3】实现带预览图幻灯片效果的示例代码

    【JS+CSS3】实现带预览图幻灯片效果的示例代码

    一.前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二.代码 结构 <div class="slider"><!-- 特效区 --> <div class="main"><!-- 主视图区 --> <div class="main_i"> <div class="caption&quo

  • PHP curl模拟登录带验证码的网站

    需求是这样的,需要登录带验证码的网站,获取数据,但是不可能人为一直去记录数据,想通过自动采集的方式进行,如下是试验出来的结果代码!有需要的可以参考下! <?php namespace Home\Controller; use Think\Controller; class LoginController extends Controller { protected $cookieName = array('cookie_verify', 'cookie_verify'); protected $

  • node.js 实现手机号验证码登录功能

    node.js 实现手机号验证码登录功能

    1.注册容联云通信账号(免费) 1.官网进行注册:https://www.yuntongxun.com/ 第二步 拿到自己的ACCOUNT_SID.AUTH_TOKEN.Rest_URL.AppID 第三步注册自己的测试手机号 第四步 下载包 1.npm i md5 --save2.npm i moment --save3.npm i js-base64 --save4.npm i request --save 一次下载 :npm i md5 moment js-base64 request -

  • Python爬虫模拟登录带验证码网站

    Python爬虫模拟登录带验证码网站

    爬取网站时经常会遇到需要登录的问题,这是就需要用到模拟登录的相关方法.python提供了强大的url库,想做到这个并不难.这里以登录学校教务系统为例,做一个简单的例子. 首先得明白cookie的作用,cookie是某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据.因此我们需要用Cookielib模块来保持网站的cookie. 这个是要登陆的地址 http://202.115.80.153/ 和验证码地址 http://202.115.80.153/CheckCode.

  • 原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

    原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

    今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; } 在此页底部有更多的例子. 浏览器支持 Internet ExplorerFirefoxOpera

随机推荐