脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js验证码登录页面

H5+css3+js搭建带验证码的登录页面

 更新时间：2020年10月11日 11:24:48   作者：hoho_12  
这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

相关文章

  • JavaScript中类型的强制转换与隐式转换详解

    JavaScript中类型的强制转换与隐式转换详解

    类型强制Coercion是将值从一种类型转换为另一种类型的过程（例如字符串转换为数字,对象转换为布尔值等）,下面这篇文章主要给大家给大家介绍了JavaScript中类型的强制转换与隐式转换的相关资料,需要的朋友可以参考下
    2021-08-08
  • JavaScript基础之AJAX简单的小demo

    JavaScript基础之AJAX简单的小demo

    这篇文章主要介绍了JavaScript基础之AJAX简单的小demo ，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-01-01
  • javascript实现日期按月份加减

    javascript实现日期按月份加减

    JavaScript实现日期加减计算功能代码实例，因为在js中没有类似C#中的AddDays方法，所以要想实现日期加减的话，就需要自己写函数来实现。这里分享给大家，有需要的小伙伴可以参考下
    2015-05-05
  • Laravel中常见的错误与解决方法小结

    Laravel中常见的错误与解决方法小结

    大家在用Laravel框架期间可能会遇到了不少问题，现在我将自己遇到的一些问题总结出来，有一些调试起来着实不太容易，本文筛选出几个，希望这篇文章能让大家在PHP开发中少走一些弯路。
    2016-08-08
  • 浅析JavaScript Array和string的转换(推荐)

    浅析JavaScript Array和string的转换(推荐)

    下面小编就为大家带来一篇浅析JavaScript Array和string的转换(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS+CSS相对定位实现的下拉菜单

    JS+CSS相对定位实现的下拉菜单

    这篇文章主要介绍了JS+CSS相对定位实现的下拉菜单,涉及JavaScript结合css的定位技术实现下拉菜单的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JS 自动完成 AutoComplete(Ajax 查询)

    JS 自动完成 AutoComplete(Ajax 查询)

    实现类似于百度或谷歌的搜索下拉列表的，就是打开百度往里输入你要查询的条件，只要你一输入他就自动弹出一个下拉列表框，并显示相关所有搜索内容
    2009-07-07
  • mui js控制开关状态、修改switch开关的值方法

    mui js控制开关状态、修改switch开关的值方法

    今天小编就为大家分享一篇mui js控制开关状态、修改switch开关的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS中hasOwnProperty方法用法简介

    JS中hasOwnProperty方法用法简介

    hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性,如果是,返回true,否者false; 参数propertyName指要检测的属性名,这篇文章给大家介绍JS中hasOwnProperty方法用法简介,感兴趣的朋友一起看看吧
    2024-01-01
  • jfinal与bootstrap的登出实战详解

    jfinal与bootstrap的登出实战详解

    这篇文章主要为大家详细介绍了jfinal与bootstrap的登出实战，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论