1.网页作品简介 ：一款非常大气实用的html5全屏下雪动画背景用户登录注册表单切换模板，登录、注册、忘记密码三个表单窗口可自由切换。更有趣的是，当点击密码输入框时，猫头鹰会蒙上眼睛。
2.网页作品编辑：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。
文章目录
HTML+CSS+JS 实现全屏下雪动画背景用户登录注册表单作品介绍一、作品展示二、文件目录三、代码实现四、web前端(学习资料)五、源码获取六、更多源码 二、文件目录三、代码实现<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>登录</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/login.css"> <link rel="stylesheet" href="css/sign-up-login.css"> <link rel="stylesheet" type="text/css" href="/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/inputEffect.css" /> <link rel="stylesheet" href="css/tooltips.css" /> <link rel="stylesheet" href="css/spop.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/snow.js"></script> <script src="js/jquery.pure.tooltips.js"></script> <script src="js/spop.min.js"></script> <script> function goto_forget(){ $("#forget-username").val(""); $("#forget-password").val(""); $("#forget-code").val(""); $("#tab-3").prop("checked",true); } function login(){//登录 var username = $("#login-username").val(), password = $("#login-password").val(), validatecode = null, flag = false; //判断用户名密码是否为空 if(username == ""){ $.pt({ target: $("#login-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名不能为空" }); flag = true; } if(password == ""){ $.pt({ target: $("#login-password"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"密码不能为空" }); flag = true; } //用户名只能是15位以下的字母或数字 var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$"); if(!regExp.test(username)){ $.pt({ target: $("#login-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名必须为15位以下的字母或数字" }); flag = true; } if(flag){ return false; }else{//登录 //调用后台登录验证的方法 alert('登录成功'); return false; } } //注册 function register(){ var username = $("#register-username").val(), password = $("#register-password").val(), repassword = $("#register-repassword").val(), code = $("#register-code").val(), flag = false, validatecode = null; //判断用户名密码是否为空 if(username == ""){ $.pt({ target: $("#register-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名不能为空" }); flag = true; } if(password == ""){ $.pt({ target: $("#register-password"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"密码不能为空" }); flag = true; }else{ if(password != repassword){ $.pt({ target: $("#register-repassword"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"两次输入的密码不一致" }); flag = true; } } //用户名只能是15位以下的字母或数字 var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$"); if(!regExp.test(username)){ $.pt({ target: $("#register-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名必须为15位以下的字母或数字" }); flag = true; } //检查用户名是否已经存在 //调后台代码检查用户名是否已经被注册 //检查注册码是否正确 //调后台方法检查注册码，这里写死为11111111 if(code != '11111111'){ $.pt({ target: $("#register-code"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"注册码不正确" }); flag = true; } if(flag){ return false; }else{//注册 spop({ template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录', position: 'top-center', style: 'success', autoclose: 3000, onOpen : function(){ var second = 2; var showPop = setInterval(function(){ if(second == 0){ clearInterval(showPop); } $('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录'); second--; },1000); }, onClose : function(){ goto_login(); } }); return false; } } //重置密码 function forget(){ var username = $("#forget-username").val(), password = $("#forget-password").val(), code = $("#forget-code").val(), flag = false, validatecode = null; //判断用户名密码是否为空 if(username == ""){ $.pt({ target: $("#forget-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名不能为空" }); flag = true; } if(password == ""){ $.pt({ target: $("#forget-password"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"密码不能为空" }); flag = true; } //用户名只能是15位以下的字母或数字 var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$"); if(!regExp.test(username)){ $.pt({ target: $("#forget-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名必须为15位以下的字母或数字" }); flag = true; } //检查用户名是否存在 //调后台方法 //检查注册码是否正确 if(code != '11111111'){ $.pt({ target: $("#forget-code"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"注册码不正确" }); flag = true; } if(flag){ return false; }else{//重置密码 spop({ template: '<h4 class="spop-title">重置密码成功</h4>即将于3秒后返回登录', position: 'top-center', style: 'success', autoclose: 3000, onOpen : function(){ var second = 2; var showPop = setInterval(function(){ if(second == 0){ clearInterval(showPop); } $('.spop-body').html('<h4 class="spop-title">重置密码成功</h4>即将于'+second+'秒后返回登录'); second--; },1000); }, onClose : function(){ goto_login(); } }); return false; } } </script> <style type="text/css"> html{width: 100%; height: 100%;} body{ background-repeat: no-repeat; background-position: center center #2D0F0F; background-color: #00BDDC; background-image: url(images/snow.jpg); background-size: 100% 100%; } .snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; } </style> </head> <body> <!-- 雪花背景 --> <div class="snow-container"></div> <!-- 登录控件 --> <div id="login"> <input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked /> <input id="tab-2" type="radio" name="tab" class="sign-up hidden" /> <input id="tab-3" type="radio" name="tab" class="sign-out hidden" /> <div class="wrapper"> <!-- 登录页面 --> <div class="login sign-in-htm"> <form class="container offset1 loginform"> <!-- 猫头鹰控件 --> <div id="owl-login" class="login-owl"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div> <div class="pad input-container"> <section class="content"> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="login-username" autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" /> <label class="input__label input__label--hideo" for="login-username"> <i class="fa fa-fw fa-user icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/> <label class="input__label input__label--hideo" for="login-password"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> </section> </div> <div class="form-actions"> <a tabindex="4" class="btn pull-left btn-link text-muted" onClick="goto_forget()">忘记密码?</a> <a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a> <input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录" style="color:white;"/> </div> </form> </div> <!-- 忘记密码页面 --> <div class="login sign-out-htm"> <form action="#" method="post" class="container offset1 loginform"> <!-- 猫头鹰控件 --> <div id="owl-login" class="forget-owl"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div> <div class="pad input-container"> <section class="content"> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="forget-username" autocomplete="off" placeholder="请输入用户名"/> <label class="input__label input__label--hideo" for="forget-username"> <i class="fa fa-fw fa-user icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="forget-code" autocomplete="off" placeholder="请输入注册码"/> <label class="input__label input__label--hideo" for="forget-code"> <i class="fa fa-fw fa-wifi icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" id="forget-password" placeholder="请重置密码" /> <label class="input__label input__label--hideo" for="forget-password"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> </section> </div> <div class="form-actions"> <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a> <input class="btn btn-primary" type="button" onClick="forget()" value="重置密码" style="color:white;"/> </div> </form> </div> <!-- 注册页面 --> <div class="login sign-up-htm"> <form action="#" method="post" class="container offset1 loginform"> <!-- 猫头鹰控件 --> <div id="owl-login" class="register-owl"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div> <div class="pad input-container"> <section class="content"> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="register-username" autocomplete="off" placeholder="请输入用户名" maxlength="15"/> <label class="input__label input__label--hideo" for="register-username"> <i class="fa fa-fw fa-user icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" id="register-password" placeholder="请输入密码" maxlength="15"/> <label class="input__label input__label--hideo" for="register-password"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" id="register-repassword" placeholder="请确认密码" maxlength="15"/> <label class="input__label input__label--hideo" for="register-repassword"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="register-code" autocomplete="off" placeholder="请输入注册码"/> <label class="input__label input__label--hideo" for="register-code"> <i class="fa fa-fw fa-wifi icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> </section> </div> <div class="form-actions"> <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a> <input class="btn btn-primary" type="button" onClick="register()" value="注册" style="color:white;"/> </div> </form> </div> </div> </div> </body> </html><!DOCTYPE html>
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的 「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、七夕表白网页制作、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、web期末大作业模板 、等! 「 前后开发者，一起探讨 前端，JAVA ，Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可在 V幸 公Z号 >>> web前端小日记
六、更多源码
500多例 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
