本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】