1 注册（代码补全，参考即可）
参考一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<style >
body{background-image: url("4.png");background-size:100%;}
</style>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div-title">
<h3>注册</h3>
</div>
<div class="modal">
<div class="modal-content">
<i class="fa fa-times close"></i>
<form class="modal-form">
<div id="form-boder">
<form method="post">
<div id="img-control">
</div>
<label class="form-label" for="account">账号</label>
<input id="account" class="form-input" type="text" placeholder="账号" required="required"/><br>
<label class="form-label" for="password">密码</label>
<input id="password" class="form-input" type="password" placeholder="密码" required="required"/><br>
<input type="text" value="" placeholder="请输入验证码（区分大小写）"
style="height:30px;position: relative; top:-15px; font-size:15px;margin-left: 570px;"id ="text">
<canvas id="canvas" width="100" height="33" onclick="dj()"
style="border: 1px solid #ccc;
border-radius: 5px;"></canvas>
<button class="btn" onclick="sublim()">提交</button>
<label id="refister" class="form-label" for="password">已有账号<a href="登录界面.html">点击登录</a></label><br>
<h1><button type="submit" class="btn btn-primary btn-block" onClick="JavaScript:alert('注册成功');" value="注册">注册</button>
</h1>
<script>
var show_num = [];
draw(show_num);
function dj(){
draw(show_num);
}
function sublim(){
var val=document.getElementById("text").value;
var num = show_num.join("");
if(val==''){
alert('请输入验证码！');
}else if(val == num){
alert('提交成功！');
document.getElementById(".input-val").val('');
draw(show_num);
}else{
alert('验证码错误！\n你输入的是: '+val+"\n正确的是: "+num+'\n请重新输入！');
document.getElementById("text").value='';
draw(show_num);
}
}
function draw(show_num) {
var canvas_width=document.getElementById('canvas').clientWidth;
var canvas_height=document.getElementById('canvas').clientHeight;
var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
var aCode = sCode.split(",");
var aLength = aCode.length;//获取到数组的长度
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt;
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
function randomColor() {//得到随机的颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</form>
</div>
</form>
</div>
</div>
</body>
</html>参考二
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" href="maincss/css2.css" />
</script>
</head>
<body style='background-image: url("dl.jpg");'>
<div class="container">
<h1>注册</h1>
<form id="registerForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" >
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" >
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" >
</div>
<div class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" id="confirmPassword" name="confirmPassword" >
</div>
<button type="submit" onclick="validateForm()">注册</button>
</form>
</div>
<script>
function validateForm() {
var username1 = document.getElementById("username").value;
var email1 = document.getElementById("email").value;
var password1 = document.getElementById("password").value;
var confirmPassword1 = document.getElementById("confirmPassword").value;
if(username1==""){
alert("用户名不能为空");
}
else if(email1==""){
alert("邮箱不能为空");
}
else if(password1==""){
alert("密码不能为空");
}
else if(confirmPassword1==""){
alert("确认密码不能为空");
}
else{
if (password1 !== confirmPassword1) {
alert('注册失败！两次密码不一致！');
}
else {
alert('注册成功！');
}
}
}
</script>
</body>
</html>2 首页
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylessheet" href="css/public.css"/>
<style type="text/css">
/*网页代码*/
*{margin: 40px;padding: 0;font-family: "宋体";}
.header{width: 1200px;height: 30px;margin:0 auto;}
ul,li{list-style:none;/*位置点*/}
a{text-decoration:none;/*下划线*/}
/*导航栏设置*/
.nav ul li{float: left;/*水平放置*/ margin-top: -40px;/*距离背景顶部距离*/margin-right:90px;margin-left :-40px;}
.nav{width: 1200px;margin: 0 auto;overflow: hidden;}
.nav ul li a{width: 130px;height: 52px;line-height:30px;display: block;color: #E2123D;font-size: 18px;margin: 0 1.5px;padding-top: 4px;/*字体*/
}
.nav ul li:hover{background: #ffc0cd;/*字体背景设置*/}
.nav ul li ul{position:absolute;display: none;}
.nav ul li ul li{float: none;height: 38px;}
.nav ul li ul li a{
border-right: none;
border-top: 1px dotted#ccc;
background: #1C3186;
font-size: 16px;
padding-top: 0px;
height: 38px;
position: sticky;
padding-left: 0px;
}
.nav ul li:hover ul{display: block;z-index: 999999999;}
/*导航栏背景图片*/
body{background-image: url("2.jpg");background-size:cover;}
</style>
</head>
<body>
<header>
<div style="display: table-cell; text-align: center; vertical-align: middle;">
<p>
<div class="daohang">
<div class="nav">
<ul>
<li><a href="课程表.html">课程表</a></li>
<li><a href="注册界面.html">注册</a></li>
<li><a href="登录界面.html">登录</a></li>
<li><a href="#">个人理财</a>
<ul>
<li><a href="#">资产负债表</a></li>
<li><a href="#">理财计算器</a></li>
</ul>
</li>
<li><a href="#">关于我</a>
<ul>
<li><a href="https://www.douyin.com/user/MS4wLjABAAAAzYqKCNJ2HLcEnhtd0dDa-jD5xu5sv7JNKswpxU3bsx00sBmjWO_v4-SRpuppTNoD">抖音</a></li>
<li><a href="https://rc.qzone.qq.com/?_t_=0.8902500015392587">QQ空间</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</p>
</div>
</header>
</body>
</html>3 课程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>课程表</title>
<table border="15" width="1000">
</table>
</head>
<body>
<caption>课程表</caption>
<table border="10" width="1000" height="500">
<thead style="background: #966666">
<tr>
<th ></th><th ></th>
<th>星期一</th><th>星期二</th><th>星期三</th>
<th>星期四</th>
<th>星期五</th><th>备注</th>
</tr>
</thead>
<tbody style="background: #eeeddd">
<tr>
<td rowspan="4">上午</td>
<td>第一节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
<tr>
<td>第二节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
<tr>
<td>第三节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
<tr>
<td>第四节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
<tr>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第五节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
<tr>
<td>第六节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
<tr>
<td>第七节</td><td>语文</td><td>数学</td><td>生物</td>
<td>物理</td><td>政治</td><td></td>
</tr>
</tbody>
</table>
</body>
</html>
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
