效果图：
部分代码：
<%--
Created by IntelliJ IDEA.
User: mingkunyu
Date: 2018/11/15
Time: 8:38 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<html>
<head>
<title>注册</title>
<%--引入bootstrap--%>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootBlock.css">
<style>
body{
background:url("img/3.jpg");
background-size: cover;
transition: all 1s;
/*动画名称*/
animation-name:myfirst;
/*变换时间*/
animation-duration:12s;
/*动画开始时间*/
animation-delay:2s;
/*下一周期循环播放*/
animation-iteration-count:infinite;
/*动画开始运行*/
animation-play-state:running;
}
@keyframes myfirst
{
0% { background:url("img/3.jpg"); background-size: cover;}
34% { background:url("img/2.jpg"); background-size: cover;}
67% { background:url("img/1.jpg"); background-size: cover;}
100% { background:url("img/3.jpg"); background-size: cover;}
}
#registerForm{
position: relative;
background: rgba(255,255,255,0.3);
width:600px;
margin:160px auto;
padding: 40px;
border-radius: 10px;
box-shadow: 1px 1px 15px #dae4ff;
opacity: 1;
/*动画名称*/
animation-name:YU;
/*变换时间*/
animation-duration:6s;
/*动画开始时间*/
/*animation-delay:1s;*/
/*下一周期循环播放*/
/*animation-iteration-count:infinite;*/
/*动画开始运行*/
animation-play-state:running;
}
@keyframes YU {
0% { opacity: 0}
100% { opacity: 1}
}
#registerForm h1{
text-align: center;
}
#canvas{
position: absolute;
top:-150px;
/*top: 160px;*/
}
</style>
</head>
<body>
<form id="registerForm" action="UserServlet" method="post">
<input type="hidden" name="method" value="register">
<canvas id="canvas" width="500" height="170" ></canvas>
<h1>REGISTER</h1>
<div class="form-group" >
<label for="Username">Username</label><span id="checkUsername" style="float: right"></span><%--错误提示--%>
<input type="text" class="form-control" id="Username" placeholder="Username" name="username" onblur="checkUser()">
</div>
<div class="form-group">
<label for="email">Email</label><span id="checkEmail" style="float: right"></span><%--错误提示--%>
<input type="email" class="form-control" id="email" placeholder="Email" name="email" onblur="checkEmail()">
</div>
<div class="form-group">
<label for="Password1">Password</label><span id="checkPassword1" style="float: right"></span><%--错误提示--%>
<input type="password" class="form-control" id="Password1" placeholder="Password" name="password1" onblur="checkPassword()">
</div>
<div class="form-group">
<label for="Password2">Confirm Password</label><span id="checkPassword2" style="float: right"></span><%--错误提示--%>
<input type="password" class="form-control" id="Password2" placeholder="Confirm Password" name="password2" onblur="checkPasswordTwo()">
</div>
<div class="form-group">
<button class="btn btn-default" onclick="return checkAll()">Sign up</button>
</div>
</form>
</body>
<script type="text/javascript" charset="utf-8">
// 前端校验----------------------------------------------------
function checkUser(){
var username=$("#Username").val();
var reg=/^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
if(reg.test(username)){
if(username.length<6||username.length>18){
$("#checkUsername").html("<em style='color:#ff756f'>6-18位字符组成！</em>");
return false;
}else{
$("#checkUsername").html("<em style='color:#b1ffa4'>OK</em>");
return true;
// // 用户名唯一性检验-------
// $.ajax({
// type: "POST",
// url: "/UserServlet",
// data: {username:$("#username").val(),method:"checkUsername"},
// dataType: "text",
// success: function(data){
// alert(data);
// $("#message1").html(data);
//
// }
// });
}
}else{
if(username.length===0){
$("#checkUsername").html("<em style='color:#ff756f'>必填！</em>");
return false;
}else{
$("#checkUsername").html("<em style='color:#ff756f'>6-18位字符组成！</em>");
return false;
}
}
}
function checkEmail(){
var e=$("#email").val();
var regs=/^\w+@\w+\.\w+$/;
if(regs.test(e)){
$("#checkEmail").html("<em style='color:#b1ffa4'>OK</em>");
return true;
}else{
$("#checkEmail").html("<em style='color:#ff756f'>6-邮箱格式错误！</em>");
return false;
}
}
function checkPassword(){
var ps=$("#Password1").val();
var regs=/^[a-zA-Z0-9]{6,18}$/;
if(regs.test(ps)){
$("#checkPassword1").html("<em style='color:#b1ffa4'>OK</em>");
return true;
}
else{
$("#checkPassword1").html("<em style='color:#ff756f'>6-18位字符组成！</em>");
return false;
}
}
function checkPasswordTwo(){
var ps1=$("#Password1").val();
var ps2=$("#Password2").val();
if(ps1===ps2 && ps2!==""){
$("#checkPassword2").html("<em style='color:#b1ffa4'>OK</em>");
return true;
}
else{
$("#checkPassword2").html("<em style='color:#ff756f'>密码不一致！</em>");
return false;
}
}
function checkAll(){
if(checkUser()&& checkPassword() && checkPasswordTwo() && checkEmail()){
$("#registerForm").submit();
}else{
return false;
}
}
// 前端验证end------------------------------------------
// 画图--------------------------------------------------
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
// 右线
cxt.beginPath();
cxt.moveTo(250,10); //移动至开始点
cxt.lineTo(490,150);
cxt.shadowColor="#c0c9e4";
cxt.lineWidth=4;
cxt.strokeStyle='#FFFFFF';
cxt.lineJoin='round';// lineJoin 属性,可以设置线的交汇处的样式
cxt.lineCap='round'; //lineCap 属性，定义线条的端点。
cxt.shadowBlur=15;// shadowBlur 设置或返回用于阴影的模糊级别。
cxt.shadowOffsetX=3; // shadowOffsetX 设置或返回阴影与形状的水平距离。
// cxt.shadowOffsetY=3; // shadowOffsetY 设置或返回阴影与形状的垂直距离。
cxt.globalAlpha=0.3;//透明度
cxt.stroke();
cxt.closePath();//填充或闭合 需要先闭合路径才能画
// 左线
cxt.beginPath();
cxt.moveTo(250,10); //移动至开始点
cxt.lineTo(10,150);
cxt.shadowColor='#bec8e3';
cxt.shadowBlur=15;
cxt.shadowOffsetX=3;
// cxt.shadowOffsetY=-3;
cxt.strokeStyle='#FFFFFF';
cxt.lineJoin='round';// lineJoin 属性,可以设置线的交汇处的样式
cxt.lineCap='round'; //lineCap 属性，定义线条的端点
cxt.globalAlpha=0.3;//透明度
cxt.stroke();
cxt.closePath();//填充或闭合 需要先闭合路径才能画
// 上圆
cxt.beginPath();
cxt.arc(250,15,5,0,2*Math.PI);
cxt.globalAlpha=0.4;//透明度
cxt.shadowBlur=0;
cxt.shadowOffsetX=0; // shadowOffsetX 设置或返回阴影与形状的水平距离。
cxt.shadowOffsetY=0;
cxt.stroke();
cxt.closePath();//填充或闭合 需要先闭合路径才能画
// 左圆
cxt.beginPath();
cxt.arc(10,150,3,0,2*Math.PI);
cxt.globalAlpha=0.4;//透明度
cxt.shadowBlur=0;
cxt.shadowOffsetX=0; // shadowOffsetX 设置或返回阴影与形状的水平距离。
cxt.shadowOffsetY=0;
cxt.stroke();
cxt.closePath();//填充或闭合 需要先闭合路径才能画
// 右圆
cxt.beginPath();
cxt.arc(490,150,3,0,2*Math.PI);
cxt.globalAlpha=0.4;//透明度
cxt.shadowBlur=0;
cxt.shadowOffsetX=0; // shadowOffsetX 设置或返回阴影与形状的水平距离。
cxt.shadowOffsetY=0;
cxt.stroke();
cxt.closePath();//填充或闭合 需要先闭合路径才能画
</script>
</html>
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
