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


Posted in Javascript onOctober 11, 2020

本文实例为大家分享了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 ©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 相关文章推荐
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
原生js生成图片验证码
Oct 11 #Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
js+h5 canvas实现图片验证码
Oct 11 #Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
如何手写简易的 Vue Router
Oct 10 #Javascript
如何手写一个简易的 Vuex
Oct 10 #Javascript
echarts实现晶体球面投影的实例教程
Oct 10 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
企业形象策划方案
2014/05/29 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
端午节活动总结报告
2015/02/11 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
与死神共舞观后感
2015/06/15 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
教师节领导致辞
2015/07/29 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server