Login page display:
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>登 录</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 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;
}
The dynamic background of login.html is:
Note: The implementation of the verification code function in the login.html page refers to the blog: (modifications have been made on this basis) (15 messages) [Front end] Simple verification code production_Advanced er's blog-CSDN blog_Front end is simple Verification code 
https://blog.csdn.net/qq_43466457/article/details/100559974
Registration page display :
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>注 册</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 page background image:
The picture comes from: [Dynamic desktop wallpaper] HD dynamic picture_The other shore desktop wallpaper (netbian.com) http://www.netbian.com/dongtai/index.htm
The environment uses vscode to run >_< installed the px to rem & rpx & vw (cssrem) plugin