​​1.网页作品简介​​ ：一款非常大气实用的html5全屏下雪动画背景用户登录注册表单切换模板，登录、注册、忘记密码三个表单窗口可自由切换。更有趣的是，当点击密码输入框时，猫头鹰会蒙上眼睛。

​​2.网页作品编辑​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

文章目录

  • ​​HTML+CSS+JS 实现全屏下雪动画背景用户登录注册表单​​
  • ​​作品介绍​​
  • ​​一、作品展示​​
  • ​​二、文件目录​​
  • ​​三、代码实现​​
  • ​​四、web前端(学习资料)​​
  • ​​五、源码获取​​
  • ​​六、更多源码​​

二、文件目录

三、代码实现

<!DOCTYPE html><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="http://cdn.bootcss.com/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;    }//检查用户名是否已经存在//调后台代码检查用户名是否已经被注册

//检查注册码是否正确//调后台方法检查注册码，这里写死为11111111if(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>

​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​

适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​​

❉1.看到这里了就 ​​[点赞+好评+收藏] 三连​​ 支持下吧，你的 ​​「点赞，好评，收藏」​​是我创作的动力。

❉ 2.​​关注我​​ ~ 每天带你学习 :各种前端插件、七夕表白网页制作、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、web期末大作业模板 、等! 「 前后开发者，一起探讨 前端，JAVA ，Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可在 ​​V幸 公Z号 >>> web前端小日记​​

六、更多源码

500多例 ​​HTML5期末考核大作业源码​​ 包含 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

HTML+CSS+JS 实现全屏下雪动画背景用户登录注册表单相关推荐

  1. html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享

    本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图:                     ----------------------查 ...

  2. HTML5 CSS登录注册表单界面示例源码

    先上图 高质量前端技术交流,有问必答q群:579720104 html <!DOCTYPE html> <html lang="zh"> <head& ...

  3. 登录界面转换实现html,html5和css3登录注册表单界面切换动画

    这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画. HTML html结构包含两个表单:登录表单和注册表单.开始时使用css将注册表单隐藏. Log in Yo ...

  4. 【HTML/CSS】简单登录注册表单制作

    实现效果: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

  5. HTML+CSS+JS 实现 ❤️全屏图片手风琴效果❤️

  6. HTML、CSS、js幻灯片登录/注册表单

    html代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...

  7. Web前端大作业—电影网页介绍8页(html+css+javascript) 带登录注册表单

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  8. js+css3简易实现2023新年快乐全屏满天星动画特效

    目录 ⭐ 前言 一.效果图 二.代码实现 2.1 html 2.2 CSS 2.3. JS ⭐ 预览 ⭐ 前言 js+css3全屏星星闪烁背景2023新年快乐动画特效,文字还有3D立体效果.其中,利用 ...

  9. jQuery弹出层登录和全屏注册表单

    jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...

  10. [css] 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

    [css] 你知道全屏滚动的原理是什么吗?它用到了CSS的哪些属性? 全屏滚动和轮播图类似,都是通过改变元素位置或者显示与隐藏来实现,配合JS的一些交互距离判断,实现类似原生滚动捕获的效果.这里全屏的 ...

最新文章

  1. [转]SQL注入攻防入门详解
  2. BZOJ 3203 sdoi 2013 保护出题人
  3. React开发（242）:dva概念6effect
  4. 根据Web服务器的记录来追踪黑客(转)
  5. VS2008 只生成DLL不生成lib文件
  6. android webservice 简单应用
  7. android cpu 压力测试,两个古董级压力测试工具 leakyapp.exe 和 cpustre.exe
  8. Tensorflow 之 name/variable_scope 变量管理
  9. 修改eclipse3.7默认字体
  10. Qt + 运动控制 （固高运动控制卡）【1】环境准备，框架搭建
  11. python 实现相关系数计算和检验
  12. JavaScript判断数组是否为空、 判断数据类型
  13. 【JavaScript】三种方式入手JS弹窗
  14. win10内存占用率高达95%解决方法
  15. 在线epub转txt格式如何转换
  16. 计算机及格率用什么函数,excel计算及格率函数的使用教程
  17. 魔兽世界怀旧服务器无限刷怪点,魔兽世界怀旧服50级刷怪地点汇总
  18. PDF文档解析java Big Faceless
  19. 71.JAVA编程思想——JAVA与CGI
  20. Java选择题（十）

热门文章

  1. 一个成功企业家立下的22条规矩
  2. 研究生们都在推荐哪些好用的论文在线翻译软件？
  3. linux的shell命令
  4. 获取各城市poi数据
  5. java集合框架图（详细版）
  6. 淘宝主营类目占比对店铺有哪些影响
  7. 单片机通过蜂鸣器播放任意音乐代码实现(1):单片机代码部分
  8. python 最优解 ma_python遗传算法求最优解
  9. 进销存软件哪个简单好用？商户必看
  10. ODI Studio（问题5）ORA-12899：列的长度不相同