Html+Css+Javascript实现登录和注册页面

登录页面展示：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/login.css">
    <script>
        var options={
		 canvasId:'mycanvas',
		 width:200,
		 height:50,
		 txt:'' 
	}
	//生产验证码
	function produceCode(options){
		var code="";
		var random=new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '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');
		for(var i=0;i<4;i++){
			var index=Math.floor(Math.random()*62);
			code+=random[index];
		}
		options.txt=code;
	}
	//产生随机数字
	function randomNum(min,max){
		return Math.floor(Math.random()*(max-min)+min);
	}
	//产生随机颜色
	function randomColor(min,max){
		var r=randomNum(min,max);
		var g=randomNum(min,max);
		var b=randomNum(min,max);
		return "rgb("+r+","+g+","+b+")";
	}
	//生产验证码背景
	 function code(options){
	 	produceCode(options);
	 	 var canvas=document.getElementById(options.canvasId);
	 	  canvas.width=options.width||200;//画布的宽
     	  canvas.height=options.height||60;//画布的高
	 	 var ctx=canvas.getContext("2d");//创建一个canvas对象
	 	 ctx.textBaseline="middle";
	 	 ctx.fillStyle=randomColor(60,255);
	 	 ctx.fillRect(0,0,canvas.width,canvas.height);
	 	for(var i=0;i<options.txt.length;i++){
	 		var txt=options.txt.charAt(i);
	 		ctx.font='50px SimHei';
	 		ctx.fillStyle = randomColor(60, 180); /**随机生成字体颜色*/
	 		ctx.shadowOffsetY = randomNum(-3, 3);
	 		ctx.shadowBlur = randomNum(-3, 3);
	 		ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
	 		 var x = options.width / (options.txt.length+1) * (i+1);
	 		 var y = options.height /2;
	 		var deg = randomNum(-30, 30);
	 		/**设置旋转角度和坐标原点*/
	 		ctx.translate(x, y);
	 		ctx.rotate(deg * Math.PI / 180);
	 		ctx.fillText(txt, 0, 0);
	 		/**恢复旋转角度和坐标原点*/
	 		ctx.rotate(-deg * Math.PI / 180);
	 		ctx.translate(-x, -y);
	 	}
	 }
	window.onload=function(){
		code(options)
	}

    </script>
</head>
<body>
<div class="login">
    <h1>登&nbsp;&nbsp;录</h1>
    <form method="post" action="">
        <input class="input_box"  type="text" name="username" placeholder="学号/工号/用户名"/><br>
        <input class="input_box1" type="password" name="password" placeholder="密码"/><br>
        <div class="yzm">
			<input class="input_box2" type="text" placeholder="验证码"/>
			<canvas id="mycanvas" onclick="code(options)"></canvas>
		</div>
        <input type="radio" name="object" id="student">学生
        <input type="radio" name="object" id="dmanager">宿管
        <input type="radio" name="object" id="manager">管理员<br><br>
		<a href="../html/register.html">没有账号？点击这里注册</a><br>
        <input type="submit" value="登录" class="button_box"/>
    </form>
</div>
<p class="footer">Copyright &nbsp; &nbsp;author © 【风潇潇】</p>
</body>
</html>

login.css

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background:url('../image/1670411573391.gif');
    background-size: cover;
}
.login{
    width:25rem;
    height:27rem;
    background-color:white;
    border-radius: 30px;
    margin:100px auto;
    text-align: center;
    padding-top:28px;
}
.input_box{
    width:210px;
    height:23px;
    margin-top: 20px;
}
.input_box1{
    width:210px;
    height:23px;
    margin-top: 20px;
}
.yzm{
    display: flex; 
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.yzm .input_box2{
    width:135px;
    height:23px;
   margin-right: 10px;
}
 #mycanvas{
    width:68px;
    height:27px;
}  
.button_box {
    width: 210px;
    height: 35px;
    margin-top: 35px;
    border-radius: 5px;
    background-color: #9deaab;
    color: black;
}
.footer{
position:fixed;
bottom:10px;
right:650px;
}

login.html的动态背景为：

注：login.html页面中的验证码功能的实现参考博客：（在这个基础上做了改动）(15条消息) 【前端】简单验证码的制作_进阶er的博客-CSDN博客_前端简单验证码https://blog.csdn.net/qq_43466457/article/details/100559974

注册页面展示：

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/register.css">
</head>
<body>
    <div class="box">
        <h1>注&nbsp;&nbsp;册</h1>
      <form>
        <p>请选择注册角色</p>
        <input type="radio" name="object" id="student">学生
        <input type="radio" name="object" id="dmanager">宿管
        <input type="radio" name="object" id="manager">管理员
         <p>用户名</p>
         <input  class="input_box" type="text" placeholder="请输入用户名"/><br>
         <p>密码</p>
         <input  class="input_box" type="password" placeholder="请输入密码(六位数字和字母的组合)"/><br>
         <p>确认密码</p>
         <input class="input_box" type="password" placeholder="请再次输入密码"/><br>
         <p>备注</p>
         <textarea  cols="65" rows="5" placeholder="备注（可以不填）"></textarea><br>
         <input class="cm" type="checkbox"/>Check me out<br>
         <input class="zc" type="submit" value="注册"/>
      </form>
    </div>
</body>
</html>

register.css

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background: url("../image/1.jpg");
    background-size: cover;
}
.box{
  width:500px;
  margin:30px auto;
}
.box h1{
    text-align: center;
}
.box p{
    font-size: 20px;
    font-weight: 500;
}
.input_box{
    width:30rem;
    height: 1.7rem;
}
.cm{
    margin-top:30px;
}
.zc{
    width:98px;
    height:40px;
    background-color: aquamarine;
    border:2px solid black;
    margin-top:30px;
}

register.html页面背景图：

图片源于：【动态桌面壁纸】高清动态图片_彼岸桌面壁纸 (netbian.com)http://www.netbian.com/dongtai/index.htm

环境用的是vscode运行的 >_< 安装了px to rem & rpx & vw (cssrem)插件

Html+Css+Javascript实现登录和注册页面

猜你喜欢