基于上次的页面我又拼拼凑凑改进一点其他地方。1、输入框内有默认值，在输入之后可以虚化默认值。2、点击生成随机四位数的验证码。3、简单的验证码校验

代码

index.html

<html>
	<head>
		<meta charset="utf-8" />
		<title>校园广场</title>
		<link rel="stylesheet" href="./css/index.css" type="text/css"/>
	</head>
	<body id="bgImg">
			<form id="login">
				<input type="text" id="border" placeholder="请输入账号"/><!-- placeholder：虚化文本框默认内容 -->
				<input type="password" id="border" placeholder="请输入密码"/>
				<br/>
				<div id="identitys">
					身份选择
					<input type="radio" name="identity" value="teacher"/ style="margin-left: 45px;">教师 
					<input type="radio" name="identity" value="student"/ style="margin-left: 45px;">学生
				</div>
				<div >
					<input type="text" id="code" placeholder="验证码"/>
					<input type="button"  id="code2" onclick="Num()"/>
				</div>
					
				<input type="submit" value="登  录" id="sub" onclick="CheckSub()"/>
			</form>

	</body>
	<script>
	//取【min，max）之前的值
	function rand(min,max) 
	{
	    return Math.floor(Math.random()*(max-min))+min;//math.floor向下取整
	}
	function Num()
	{
		//随机生成一个四位数
		var randnum=rand(1000,9999);
		document.getElementById("code2").value=randnum;
	}
	function CheckSub()
	{
		var codenum =document.getElementById("code").value;
		if (codenum != document.getElementById("code2").value)
		{
			alert("验证码输入错误");
		}
	}
	
	</script>
</html>

 index.css

#login {
		background-color: #615E5E;
		opacity: 0.75;/*调节背景颜色的透明度*/
		 position: absolute;   
		    top: 55%;   
		    left:50%;   
		    margin: -200px 0 0 3.125rem;   
		    width: 550px;   
		    height: 350px; 
			border-radius: 30px;/*矩形圆角弧度*/
		
	}
	#bgImg {
		height: 100%;
		width: 100%;
		background: url(../img/background.png) no-repeat;
		background-size: cover;/*背景图片平铺*/
		position: absolute;
		overflow: hidden;
	}
	#border{
		
		border-radius: 10px;
		height: 35px;
		width: 350px;
		margin-top: 25px;
		margin-left:90px;
	}
	#identitys
	{
		margin-left: 90px;
		margin-top: 25px;
		color: aliceblue;
		font-family: "楷体";
		font-size: 20px;
		margin-bottom: 10px;
	}
	#code{
		border-radius: 10px;
		margin-left:90px;
		height: 35px;
		width: 180px;
	}
	#code2{
		height: 40px;
		width: 100px;
		border-radius: 10px; 
		margin-left: 20px;
		text-align: center;
		background-image: linear-gradient(to right, red, purple);/*控制字体颜色渐变*/
		-webkit-background-clip: text;
		color: transparent;
		font-size: 20px;
	}
	#sub{
		height:45px;
		width: 250px;
		margin-top: 30px;
		margin-left: 135px;
		border-radius: 10px;
		background-color: #48B3F8;
		font-size: 30px;
		font-family: "楷体";
		color: #F0F8FF;
	}

效果如下：

 

 但是这个页面有个缺陷，我的验证码输入框和显示验证码的按钮框是不对齐的，在点击显示验证码之后两个框才是对齐的，我实在不明白这是为什么？希望可以的到解答

 

 

 

 最后一段是废话，因为提示我篇幅太短，我也是实在想不出来要写什么，只能多凑一些字，这个登录页面实在是有点简陋，之后有时间优化优化，我的水平也不会优化到那里去，可能就只是改改样式什么的。

# html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟