1.店铺管理员注册
jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- 引入C标签 --> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>店铺管理员注册</title> <link rel="stylesheet" href="static/css/bootstrap.css"> <script src="static/js/jquery-3.6.0.js"></script> <script src="static/js/bootstrap.min.js"></script> <style> body { background: url("static/img/绿叶.jpg") no-repeat; background-size: 100% 100%; background-attachment: fixed; } #odiv { height: 500px; width: 800px; margin: 0 auto; margin-top: 28px; padding-top: 50px; border-radius: 30px; box-shadow: 0 0 80px background; // 白光 } input, select { background: no-repeat; border-radius: 30px; } input::-webkit-input-placeholder { color: black; } #div { margin: 0 auto; height: 20px; width: 1000px; } button { color: white; background-color: white; } #emailmsg, #namemsg, #nichengmsg, #pwdmsg { font-size: 14px; color: red; } </style> <script type="text/javascript"> /* 鼠标点击爱心特效 */ !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document); //获焦 function getname() {//用户名输入框获焦 let name = $("#name"); if(!name.value){ $("#namemsg").html(""); $("#nbmsg").html("请输入你的用户名"); return true; } } function getpassword() {//用户密码输入框获焦 let password = $("#password"); if(!password.value){ $("#pwdmsg").html(""); $("#namsg").html("请输入你的密码"); return true; } } function getnumbers() {//手机号输入框获焦 let number = $("#number"); if(!number.value){ $("#numbermsg").html(""); $("#ncmsg").html("请输入你的手机号"); return true; } } function getemail() {//电子邮箱输入框获焦 let email = $("#number"); if(!email.value){ $("#emailmsg").html(""); $("#ndmsg").html("请输入你的电子邮箱"); return true; } } function getmycolname() {//身份证输入框获焦 let mycolname = $("#mycolname"); if(!mycolname.value){ $("#shenfenmsg").html(""); $("#nnmsg").html("请输入你的身份证号"); return true; } } //失焦 function losename() {//用户名输入框失焦 let name = $("#name"); if (!name.val()) { $("#nbmsg").html(""); $("#namemsg").html("用户名不能为空"); return false; } $("#nbmsg").html(""); $("#namemsg").html(""); return true; } function losepassword() {//用户密码输入框失焦 let password = $("#password").val(); var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/; if (password=="") { $("#namsg").html(""); $("#pwdmsg").html("密码不能为空"); return false; }else if(!(reg.test(password))){ $("#namsg").html(""); $("#pwdmsg").html("密码格式错误"); return false; } $("#namsg").html(""); $("#pwdmsg").html(""); return true; } function losenumbers() {//手机号失焦 let number = $("#number").val(); var reg = /^1[3|4|5|7|8]\d{9}$/; if(number==""){ $("#ncmsg").html(""); $("#numbermsg").html("电话号不可为空"); return false; }else if(!reg.test(number)){ $("#ncmsg").html(""); $("#numbermsg").html("电话号格式错误,重新输入"); return false; } $("#ncmsg").html(""); $("#numbermsg").html(""); return true; } function loseemail() {//电子邮箱失焦 let email = $("#email").val(); var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; if(email==""){ $("#ndmsg").html(""); $("#emailmsg").html("邮箱不能为空"); return false; }else if(!(reg.test(email))){ $("#ndmsg").html(""); $("#emailmsg").html("邮箱格式有误"); return false; } $("#ndmsg").html(""); $("#emailmsg").html(""); return true; } function losemycolname() {//身份证失焦 let mycolname = $("#mycolname").val(); var reg = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}[0-9Xx]$/; if(mycolname == ""){ $("#nnmsg").html(""); $("#shenfenmsg").html("身份证不能为空"); return false; }else if(!(reg.test(mycolname))){ $("#nnmsg").html(""); $("#shenfenmsg").html("身份证格式有误"); return false; } $("#nnmsg").html(""); $("#shenfenmsg").html(""); return true; } $(function() { $("#name").blur(function() { let shopadmin_name=$("#name").val(); $.post("getShopadmin.do",{"shopadmin_name":shopadmin_name},function(data){ if(data=="ok"){ alert("该管理员已注册,请重新输入"); $("#name").val(""); } }); }) }); </script> </head> <body> <form id="form" action="getShopadmin.do" method="post"> <div> <img src="static/img/1.png" style="margin-left: 140px;"> </div> <div id="odiv" style="text-align: center; margin-top: 35px;"> <!--下拉框 --> <select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)" style="margin-bottom: 15px;"> <option value="#" selected="selected">请选择</option> <option value="Userregiser.jsp">用户注册</option> </select> <div style="margin-left: 180px;"> <table border="0" style="margin-left: 20px;"> <tr> <td style="font-size: 18px; padding-top: 10px;"><label>账户名:</label></td> <td><input type="text" onblur="losename()" onfocus="getname()" id="name" style="height: 25px; width: 270px; border-radius: 8px; transition: 0.2s; border: 0; border-bottom: 2px solid black; font-size: 14px; color: white;" placeholder="请输入你的真实姓名" /> <td><span id="namemsg" style="height: 10px; color: red;"></span><span id="nbmsg" style="height: 10px; color: white;"></span></td> </td> </tr> <tr> <td style="padding-top: 25px; font-size: 18px"><label>账户密码:</label></td> <td><input id="password" type="password" onblur="losepassword()" onfocus="getpassword()" style="margin-top: 20px; height: 25px; width: 270px; border-radius: 8px; transition: 0.2s; border: 0; border-bottom: 2px solid black; font-size: 14px; color: white;" placeholder="由字母符号数字组成且在6~18位之间" /> <td><span id="pwdmsg" style="height: 10px; color: red;"></span><span id="namsg" style="height: 10px; color: white;"></span></td> </tr> <tr> <td style="padding-top: 25px; font-size: 18px"><label>电话号码:</label></td> <td><input id="number" type="text" onblur="losenumbers()" onfocus="getnumbers()" style="margin-top: 20px; height: 25px; width: 270px; border-radius: 8px; transition: 0.2s; border: 0; border-bottom: 2px solid black; font-size: 14px; color: white;" placeholder="请输入11位的手机号" /></td> <td><span id="numbermsg" style="height: 10px; color: red;"></span><span id="ncmsg" style="height: 10px; color: white;"></span></td> </tr> <tr> <td style="padding-top: 25px; font-size: 18px"><label>电子邮箱:</label></td> <td><input id="email" type="text" onblur="loseemail()" onfocus="getemail()" style="margin-top: 20px; height: 25px; width: 270px; border-radius: 8px; transition: 0.2s; border: 0; border-bottom: 2px solid black; font-size: 14px; color: white;" placeholder="请输入您的邮箱" /></td> <td><span id="emailmsg" style="height: 10px; color: red;"></span></span><span id="ndmsg" style="height: 10px; color: white;"></span></td> </tr> <tr> <td style="padding-top: 25px; font-size: 18px"><label>身份证号:</label></td> <td><input id="mycolname" type="text" onblur="losemyclolname()" onfocus="getmycolname()" style="margin-top: 25px; height: 25px; width: 270px; border-radius: 8px; transition: 0.2s; border: 0; border-bottom: 2px solid black; font-size: 14px; color: white;" placeholder="请输入您的18位身份证号码" /></td> <td><span id="shenfenmsg" style="height: 10px; color: red;"></span></span><span id="nnmsg" style="height: 10px; color: white;"></span></td> </tr> </table> <div id="button" style="margin-right: 80px; margin-top: 20px;"> <input type="submit" action="" value="注册" style="padding-right: 10px; margin-top: 40px; border-radius: 10px; transition: 0.2s; margin-right: 80px; width: 80px; height: 40px; font-size: 18px" /> <input type="reset" value="清空" style="margin-right: 40px; margin-top: 40px; border-radius: 10px; transition: 0.2s; margin-right: 75px; width: 80px; height: 40px; font-size: 18px" /> </div> </div> </div> </form> </body> </html>
效果展示：
2.渐变注册界面
jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- 引入C标签 --> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>注册界面</title> <script id="jqbb" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> body { background-color: #fff } #canvas { box-shadow:0 0 10px #e4ffb8; } h1 { color:#4c1caa; text-align:t; } body { margin:0; padding:0; font-family:"montserrat"; background-image:linear-gradient(125deg,#e74c3c,#8e44ad,#27ae60,#2980b9,#2c3e50); background-size:400%; animation:bganimation 15s infinite; text-shadow:2.5px 5px 0.3125rem royalblue; color:#8E44AD; font-size:sans-serif; } .box { width:300px; padding:40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; } .box h1 { color:greenyellow; text-transform:uppercase; font-weight:500; } .box input[type = "text"],.box input[type = "password"] { border:0; background:none; display:block; margin:20px auto; text-align:center; border:2px solid #3498db; padding:14px 10px; width:200px; outline:none; color:white; border-radius:24px; transition:0.25s; } .box input[type = "text"]:focus,.box input[type = "password"]:focus { width:280px; border-color:#2ecc71; } -webkit-input-placeholder { color:red; font-size:20px; line-height:50px; } .box input[type = "submit"] { border:0; background:none; display:block; margin:20px auto; text-align:center; border:2px solid #2ecc71; padding:14px 40px; outline:none; color:white; border-radius:24px; transition:0.25s; cursor:pointer; } .box input[type = "submit"]:hover { background:#2ecc71; } .text { color:white; text-align:center; text-transform:uppercase; margin:0px 0; //控制主背景高度 font-size:22px; } @keyframes bganimation { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } } #emailmsg, #namemsg, #nichengmsg, #pwdmsg, #numbermsg, #shenfen { font-size: 14px; color: red; } select { background: no-repeat; border-radius: 30px; } </style> <script type="text/javascript"> /* 鼠标点击爱心特效 */ !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document); //获焦 function getname() {//用户名输入框获焦 let name = $("#name"); if(!name.value){ $("#namemsg").html(""); $("#nbmsg").html("请输入你的用户名"); return true; } } function getpassword() {//用户密码输入框获焦 let password = $("#password"); if(!password.value){ $("#pwdmsg").html(""); $("#namsg").html("请输入你的密码"); return true; } } function getnumbers() {//手机号输入框获焦 let number = $("#number"); if(!number.value){ $("#numbermsg").html(""); $("#ncmsg").html("请输入你的手机号"); return true; } } function getemail() {//电子邮箱输入框获焦 let email = $("#number"); if(!email.value){ $("#emailmsg").html(""); $("#ndmsg").html("请输入你的电子邮箱"); return true; } } //失焦 function losename() {//用户名输入框失焦 let name = $("#name"); if (!name.val()) { $("#nbmsg").html(""); $("#namemsg").html("用户名不能为空"); return false; } $("#nbmsg").html(""); $("#namemsg").html(""); return true; } function losenicheng() {//昵称输入框失焦 let nicheng = $("#nicheng"); if (nicheng.value == "") { $("#nichengmsg").html("昵称不能为空"); return false; } $("#nbmsg").html(""); $("#nichengmsg").html(""); return true; } function losepassword() {//用户密码输入框失焦 let password = $("#password").val(); var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/; if (password=="") { $("#namsg").html(""); $("#pwdmsg").html("密码不能为空"); return false; }else if(!(reg.test(password))){ $("#namsg").html(""); $("#pwdmsg").html("密码格式错误,请输入数字,字母和特殊符号,至少两种6~18位的组合"); return false; } $("#namsg").html(""); $("#pwdmsg").html(""); return true; } function loseemail() {//电子邮箱失焦 let email = $("#email").val(); var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; if(email==""){ $("#ndmsg").html(""); $("#emailmsg").html("邮箱不能为空"); return false }else if(!(reg.test(email))){ $("#ndmsg").html(""); $("#emailmsg").html("邮箱格式有误"); return false; } $("#ndmsg").html(""); $("#emailmsg").html(""); return true; } function losenumbers() {//手机号失焦 let number = $("#number").val(); var reg = /^1[3|4|5|7|8]\d{9}$/; if(number==""){ $("#ncmsg").html(""); $("#numbermsg").html("手机号不能为空"); return false; }else if(!(reg.test(number))){ $("#ncmsg").html(""); $("#numbermsg").html("电话号格式错误,应是开头为1的11位纯数字组成"); return false; } $("#ncmsg").html(""); $("#numbermsg").html(""); return true; } $(function() { $("#name").blur(function() { let user_name=$("#name").val(); $.post("getUser.do",{"user_name":user_name},function(data){ if(data=="ok"){ alert("该用户已注册,请重新输入"); $("#name").val(""); } }); }) }); </script> </head> <body> <form action="getUser.do" method="post"> <canvas id="canvas"></canvas> <div class="text"> <div class="box"> <h1>新用户注册</h1> <select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)"> <option value="#" selected="selected">请选择</option> <option value="shop.jsp">店铺管理员注册</option></select> <input id="name" type="text" name="user_name" placeholder="用户名" onblur="losename()" onfocus="getname()"> <span id="namemsg" style="font-size: 1px; color: red;"></span> <span id="nbmsg" style="font-size: 1px; color: white;"></span> <input id="password" type="password" name="user_password" placeholder="密码" onblur="losepassword()" onfocus="getpassword()"><span id="pwdmsg" style="font-size: 1px; color: red;"></span><span id="namsg" style="font-size: 1px; color: white;"></span> <input id="number" type="text" name="user_phone" placeholder="手机号" onblur="losenumbers()" onfocus="getnumbers()"><span id="numbermsg" style="font-size: 1px; color: red;"></span><span id="ncmsg" style="font-size: 1px; color: white;"></span><input id="email" type="text" name="user_mail" placeholder="电子邮箱" onblur="loseemail()" onfocus="getemail()"><span id="emailmsg" style="font-size: 1px; color: red;"></span><span id="ndmsg" style="font-size: 1px; color: white;"></span> <input type="submit" name="" placeholder="Login"> </div> </div> </form> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 1520; //控制粒子图的宽度 canvas.height = 719; // canvas.style.background = '#ff557f';//js背景地 class Ball { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.r = 20; } render() { ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } let ball = new Ball(50, 50, 'red'); ball.render(); //实例化小球 let ballArr = []; let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange']; //监听鼠标移动 canvas.addEventListener('mousemove', function(e) { // let e=e||event; ballArr.push(new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)])); // console.log(ballArr); }) //开启定时器 setInterval(function() { //清屏 ctx.clearRect(0, 0, canvas.width, canvas.height) //绘制 for (let i = 0; i < ballArr.length; i++) { ballArr[i].render(); ballArr[i].upDate(); } }, 50); </script> </body> </html>
效果图(动态渐变)：
最后注册界面展示及源码的分享就到这里，祝大家在敲代码的路上一路通畅!
