登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面
发布时间:2020-10-28 19:51:18
来源:亿速云
阅读:151
作者:Leah
本篇文章为大家展示了使用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;
}
上述内容就是使用H5+css3+js实现带验证码的登录页面,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面相关推荐
- 登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
- H5+css3+js搭建带验证码的登录页面
login.html [html] view plain copy <!DOCTYPE HTML> <html> <head> <title>EasyB ...
- JavaScript实现“打地鼠”游戏开发(3)——锤子的显示及游戏音效的添加(基于H5+CSS3+JS+jQuery实现)
说明: 上一节我们实现了打地鼠游戏的主体功能,包括:老鼠的随机出现.击中目标后分数增加,倒计时为0时游戏结束等功能.接下来我们将对游戏音效的添加.锤子效果的实现进行具体实现. 这是前两节的地址链接: ...
- h5+css3+js实现七夕言情
因为明天8月28日就是中国的情人节-七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心:制作了h5+css+js界面祝小伙伴们:七夕快乐 具体的功能有: 1.下雪的背景动画 2.下面的 ...
- 国家游泳中心-水立方 8页面 北京奥运会主游泳馆 HTML5+CSS3布局 ASP+ACCESS数据库 注册登录留言功能 搜索修改删除留言功能(增删查改)
<DOCTYPE> <html> <head> <meta charset="utf-8"> <title>国家游泳中心 ...
- 风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转 废话不多说,上全部代码: < ...
- 【笔记】查漏补缺-H5+CSS3+JS基础:JS基础
一.数据类型 1. 简单数据类型(基本数据类型) Number:数字型(整型+浮点型): 范围:Number.MIN_VALUE - Number.MAX_VALUE 特殊值:Infinity无穷大, ...
- H5+CSS3+JS/JQ 实现京东首页
京东首页代码 利用html+css+js/jQuery 实现京东首页的界面及功能 https://gitee.com/zhangqiaquan/jingdong-homepage
- html图片做一个转盘,H5+CSS3+JS制作抽奖转盘
/p> 抽奖转盘 src="http://ajax.aspnetcdn.com/ajax/ > #wrap { height: 100%; width: 500px; posit ...
最新文章
- Linux文件基本属性
- 【PC工具】chrome浏览器插件vimium:传说上网可以不用鼠标。VIM入门工具,妈妈再也不用担心我学不会vim了...
- docker之网络访问
- python 线程类 threading.Thread.join() 方法 (自闭,不让别人进来了)
- 草稿 前端开发 代码的编写习惯 缩进的意义 HTML的格式
- python中easygui有几种_一、Python 模块EasyGui详细介绍
- Spring boot 通过ApplicationRunner在启动完成后按指定顺序执行任务
- python教程 马哥_马哥python从入门到精通,资源教程下载
- 迅捷文字转语音软件v2.0.0官方免费版
- 节假日查询接口,加班,补班,日期查询,放假,日历
- 新医改背景下,民营医院如何通过绩效变革支持高质量发展?
- 为什么你要用卡片笔记法?
- 实现socket监听所有网络命名空间
- OO包设计原则遵循度自动分析检查工具JDM简介(原创)
- 你上面写的代码用什么编程软件?
- 使用开源软件 enfuse 做照片的曝光合成
- 思科交换机实现管理口访问设置+远程登录(一)
- 【UiBot实战教程】梦想云ERP系统数据获取和填写(一)
- leslie模型matlab代码6,leslie模型人口预测程序,请求大家!
- GCC编译器安装与下载
热门文章
- EasyExcel · 填充Excel
- 微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置
- PHP实现同一个账号只能在一个终端登陆
- memory内存管理系列函数咋不能用了
- Asp.Net Core Web Api的简单实例
- linux中的grep 过滤查找及“|”管道符、gzip/gunzip 压缩、zip/unzip 压缩
- 更改office365Excel导入外部数据默认使用power query
- OpenGL鼠标交互
- python脚本制作deb包_Deb包的制作 | 学步园
- [转]基于SSD的数据库性能优化