登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下
login.html
EasyBuy后台管理系统
.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;
}
EasyBuy系统登录
忘记密码?
Power By WXH ©CopyRight 2016
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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面相关推荐
- H5+css3+js搭建带验证码的登录页面
login.html [html] view plain copy <!DOCTYPE HTML> <html> <head> <title>EasyB ...
- 登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面 发布时间:2020-10-28 19:51:18 来源:亿速云 阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
- Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值...
2019独角兽企业重金招聘Python工程师标准>>> Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值.单个值和后台向前台传一个或是一 ...
- 如何保护前端JS代码?前端js代码加密
Web前端JS代码需要保护吗? 这得具体情况具体分析. 1.如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能.那不需要保护. 2.如果是精心设计一个绚丽的特效,如果想要保护这段自己付 ...
- 仿联想商城laravel实战---2、后端页面搭建(验证码如何在页面中使用)
仿联想商城laravel实战---2.后端页面搭建(验证码如何在页面中使用) 一.总结 一句话总结: 放在img里面,img的src就是生产验证码的控制器路径: img src="/admi ...
- html 登录界面js代码,详解JS实现系统登录页的登录和验证
这篇文章用JS显示表单的登录以及验证和对键盘的监听,这里有两种方法,一种是无需用户验证直接登录,一种是需要账户密码匹配才可登录. 1. html代码 登 录 2.CSS样式 .content{ pad ...
- 利用js代码引入其他js文件到页面中
在web开发中我们可能会碰到写很多js文件,例如当我们写了一个a.js文件和一个b.js文件,我们想用a.js中的方法fun_a()去调用b.js里面的fun_b()方法,这个时候我们就会想到在页面要 ...
- Smarty中直接加JS代码和将JS代码写在literal标签里
采用Smarty模板的html怎么加入JS代码呢? 如果按一般平常添加方法,会出错 .因为 Smarty会将"{}"解析为自己的方法,和js中的"{}"会冲突. ...
- 格式化JS代码,调试JS代码
1,格式化混淆后的代码 2,调试JS代码 在chrome 浏览器的地址栏中输入:chrome://inspect/#devices
最新文章
- mac自带php7降级,MAC更新自带php版本到7.0
- 使用redis incr计数来控制单位时间内对某接口的访问量
- [BUUCTF-pwn]——bbys_tu_2016
- Hyper-V Server联机调整虚拟硬盘大小
- css块元素与行内元素特点,CSS区分块级元素和行内元素
- 剑指offer面试题[20]-顺时针打印矩阵
- Javascript:实现字符串replaceAll方法
- JDK安装与环境变量配置
- 每天有数百人搜索App破解,开发者该怎么保护自己的手机应用呢?
- 等保三级核心-网络安全
- 东南大学本 硕 博论文中期答辩 毕业答辩ppt模板2021版
- SiamRPN++简述
- mount的挂载远程服务器文件夹
- 修改数据库字符集为'us7ascii'
- 猫掉进山洞C语言随机数,《小猫出生在秘密山洞》读书心得最新范文五篇
- java calendar星期_java 日历 Calendar 获取当前时间是星期几
- 软件第三方检测中心怎么选择,具备CNAS资质的确认测试报告有什么用?
- 教程:从零开始 使用Python进行深度学习!
- mixamo 导出的模型没有贴图
- 华为手机怎样才算激活了_华为手机开机激活,华为智能手机怎么激活?
热门文章
- 一行代码,揭开 CPU 执行原理!
- 从开源视角分析,搞定边缘计算云原生方案选型
- 2019年关于VM和Kubernetes的思考 | 技术头条
- Cloud一分钟 | 误删生产数据库血案,顺丰高级工程师被开除;阿里巴巴暂停美国云计算扩张?阿里云总裁正式回应:“不会减少投入”...
- [重磅] 如何更好地实现服务调用和消息推送
- 参数设置_变频器基本参数设置
- ElasticSearch 从安装开始_01
- RabbitMQ 最新版安装 (Linux环境)
- Ant Design Vue页面数据复制
- 关于java的取整/和取余%