登录页面

标签: html5  css3  javascript

前端最简单的页面便是登录页面啦,下面是我在做项目时写的,请多指教啦~~
需要做的页面
(名称不好泄露就去掉啦 O(∩_∩)O)言归正传上代码啦 (≧▽≦)/

正文如下:

<section>
	<div class="big-big" >
		<div class="big-cont">
			<div class="big-right">
				<p class="big-p">业务管理系统</p>
				<p style="height: 34px;"></p>
				<form method="post" action="?act=1" id="form" name="form">
					<p style="height: 25px;"></p>
					<p class="p-text">
						<span><img src="images/index-phone.png"/></span>
						<input type="text" name="siteID" id="siteID" value="" placeholder="请输入机构编码"/>
					</p>
					<p style="height: 13px;"></p>
					<p class="p-text">
						<span><img src="images/index-pw.png"/></span>
						<input type="text" name="phone" id="phone" value="" placeholder="请输入登录手机号"/>
					</p>
					<p style="height: 13px;"></p>
					<div class="form-div">
						<p class="p-text1" >
							<span><img src="images/index-yanzheng.png"/></span>
							<input type="text" name="password" id="password" value="" placeholder="请输入验证码"/>
						</p>
						<p><input class="button1" class="input-code" id="btn" type="button" value="获取验证码" onclick="sendcode(this)"/></p>
                           
					</div>
					<p style="height: 30px;"></p>
				   <input type="hidden" name="vercode" id="vercode"  value=""/>
					<button class="button2" onclick="checkout()">登录</button>
                   </form> 
				
			</div>
		</div>
	</div>
</section>

页面所需要的代码全部出来啦,接下来就是css来装饰他的样式啦
css内容如下:

*{margin: 0 auto;padding: 0;}
/*放置背景图*/
body{background-image: url(../images/backgr.png);background-repeat:no-repeat;background-size: cover;width: 100%;height: 100%;}
.big-big{width: 100%;height:100%;text-align: center;}
.big-cont{width: 100%;max-width: 1100px;text-align: center;height:440px;position: relative;padding: 10% 0;}

.big-right{width: 100%;height: 440px;float: right;}
.big-p{color:#FFFFFF;font-size: 34px;letter-spacing: 15px;font-family:PingFang-SC-Bold;line-height: 50px;text-shadow: -1.2246468525851679e-16px 2px 3px rgba(0, 0, 0, 0.25);}
form{width:524px;height: 317px;background-image: url(../images/index-form.png);background-repeat:no-repeat ;background-size: 100% 100%;}
form p{width: 420px;}
input{padding-left:20px;height: 50px;line-height:49px;border: none;outline: none;font-size: 16px;}
form p span{padding-left: 20px;}
.p-text{width: 420px;height: 50px;background-color: white;text-align: left;border-radius: 8px;}
.p-text1{width:260px;height:50px;background-color: white;float: left;text-align: left;border-radius: 8px;margin-right: 20px;}
.form-div{width: 420px;}
button{border: none;outline: none;}
.button1{font-family: Adobe Heiti Std;font-weight: normal;color: #6B6969;width:135px;height:50px;background: #E4E1E1;padding: 0;}
.button2{width:415px;height: 57px;background: #359DFF;font-size: 18px;font-family: SourceHanSansSC;font-weight: 400;color: #FFFFFF;border-radius: 8px;}		

页面装饰好后就是上边图片所展示的内容喽,发送验证码登录按钮都是需要借助js来实现它的功能,input框里还需判断他输入的是不是数字,毕竟输入文字的话是得不到验证码啦,JavaScript内容如下:

/*判断数字*/
function checkMobile(s) {
	var regu =/^0?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/;
	var re = new RegExp(regu);
	if (re.test(s)) {
	return true;
	} else {
	return false;
	}
}
/*判断是不是手机号码格式 获取验证码*/
function sendcode(btn) { 
	if( checkMobile( $('#phone').val()) ){
	       var phone = $.trim($('#phone').val());
	     $.post('../sendcode.php', {phone:phone},function(data,status){
	       $('#vercode').val(data);
	    });
	    settime(btn);
	
	}else{
		alert('请填写正确的手机号!');
		return false;
	}
	   }
	   
	   var countdown=60; 
	   function settime(btn) { 
	       if (countdown == 0) { 
	           btn.removeAttribute("disabled");    
	           btn.value="获取验证码"; 
	           countdown = 60; 
	           return;
	       } else { 
	           btn.setAttribute("disabled", true); 
	           btn.value="重新发送(" + countdown + ")"; 
	           countdown--; 
	           
	       } 
	       setTimeout(function() { 
	       settime(btn) }
	       ,1000) 
	   }
	   
	function checkout(){
	       
	        if( checkMobile( $('#phone').val())){
	          if ($('#password').val().length == 0){
	           alert('请输入验证码');
	   		return false;
	          }else{
	               $('form').submit();	   
	          }
	        }else{
	       	if($('#phone').val()==="admin"){
	              if ($('#siteID').val().length == 0){
	               alert('请输入机构编码');
	       		return false;
	              }else if ($('#password').val().length == 0){
	               alert('请输入密码');
	       		return false;
	              }else{
	                   $('form').submit();	   
	              }
	            }else{
	   		      alert('请填写正确的手机号!');
	   		      return false;
	            }  
	   	 }
	}

好了,以上就是登录页面和所需要的功能啦

版权声明:本文为weixin_43234487原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43234487/article/details/109765984

智能推荐

java乐观锁和悲观锁最底层的实现

1. CAS实现的乐观锁 CAS(Compare And Swap 比较并且替换)是乐观锁的一种实现方式,是一种轻量级锁,JUC 中很多工具类的实现就是基于 CAS 的,也可以理解为自旋锁 JUC是指import java.util.concurrent下面的包, 比如:import java.util.concurrent.atomic.AtomicInteger; 最终实现是汇编指令:lock...

Python 中各种imread函数的区别与联系

  原博客:https://blog.csdn.net/renelian1572/article/details/78761278 最近一直在用python做图像处理相关的东西,被各种imread函数搞得很头疼,因此今天决定将这些imread总结一下,以免以后因此犯些愚蠢的错误。如果你正好也对此感到困惑可以看下这篇总结。当然,要了解具体的细节,还是应该 read the fuc...

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

猜你喜欢

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...

基于docker环境的mysql主从复制

1、安装docker 可以参考之前的博客,之前写过了~ 2、拉取mysql镜像 3、创建mysql01和mysql02实例 主: 从: 4、进入容器修改配置 1)修改主数据库配置 进入主数据库容器 切换到 etc/mysql/目录下 查看可以看到my.cnf文件,使用vim编辑器打开,但是需要提前安装 安装vim命令: 安装成功后,修改my.cnf文件 新增配置后的my.cnf: binlog 日...

机器学习算法之决策树

原文:http://www.jianshu.com/p/6eecdeee5012 决策树是一种简单高效并且具有强解释性的模型,广泛应用于数据分析领域。其本质是一颗由多个判断节点组成的树,如: 决策树 在使用模型进行预测时,根据输入参数依次在各个判断节点进行判断游走,最后到叶子节点即为预测结果。 如何构造决策树 决策树算法的核心是通过对数据的学习,选定判断节点,构造一颗合适的决策树。 假设我们从用户...