登录和注册（Js）的写法

今天在做小组项目的时候发现登录和注册的使用不是很熟，记录下来：

<script>

//弹出框中的css部分

input { font-family: Arial, sans-serif;}

.login { width: 270px; margin: 0 auto; padding: 30px 40px; background-color: #f7f7f7;}

.login ul { list-style-type: none;}

.login li { padding: 10px 0; overflow: hidden;}

.login .li3, .login .li5 { text-align: right; font-size: 12px;}

.login .li3 input { width: 13px; height: 13px; margin: 0 3px 0 10px; vertical-align: middle;}

.login .submit { display: block; width: 100%; padding: 6px 0; border: 0 none; color: #fff; background-color: #4d90fe; cursor: pointer;}

#email, #password { width: 214px; padding: 5px; border: 1px solid #ccc;}

.forgot { color: #333;}

//遮罩层css部分

#mask {

                background: #000000;

                opacity: 0.75;

                /*IE不认这个属性*/

                filter: alpha(opacity=75);

                /*这个是为了保证IE兼容*/

                height: 800px;

                width: 100%;

                position: absolute;

                z-index: 999;

                left: 0;

                top: 0;

            }

#login {

                position: fixed;

                /*静止定位*/

                /*left: 30%;

                top: 30%;*/

                z-index: 1000;

            }

            .loginCon {

                width:350px;

                height: 270px;

            }

//弹出框中的关闭部分    #close {

                width: 20px;

                height: 20px;

                position: absolute;

                right: 10px;

                top: 10px;

                cursor: pointer;

                /*border:1px solid red;*/

                font-size:24px;

                font-weight:400

            }

</style>

<body>

    <div id="zd">

        <div class="zd1"  onclick="openNew()" >登录</div>

        <div class="zd1"  onclick="show()" >注册</div>

    </div>

</body>

<script type="text/javascript">

    function openNew() {

       //                获取页面高度和宽度

        var sHeight = document.documentElement.scrollHeight;

        var sWidth = document.documentElement.scrollWidth;

        //                alert(sHeight);

        //                alert(sWidth);

        //                可视区域的高度和宽度

        var wHeight = document.documentElement.clientHeight;

        var wWidth = document.documentElement.clientWidth;

        //                alert(sHeight);

        //                alert(sWidth);

        var oMask = document.createElement("div");

        oMask.id = "mask";

        oMask.style.height = sHeight + "px";

        oMask.style.width = sWidth + "px";

        document.body.appendChild(oMask);

        var oLogin = document.createElement("div");

        oLogin.id = "login";

        oLogin.innerHTML = '<div class="loginCon"><div class="loginCon"><div class="login"><ul><li><span><label for="email">邮箱：</label></span><input id="email" type="text"></li><li><span><label for="password">密码：</label></span><input id="password" type="password"></li><li class="li3"><input type="checkbox" id="remember"><label for="remember">记住密码</label> <input type="checkbox" id="togglePassword"><label for="togglePassword">显示密码</label></li><li class="li4"><input class="submit" type="submit" value="登录"></li></ul></div></div><div id="close">×</div></div>';

        document.body.appendChild(oLogin);

        var dHeight = oLogin.offsetHeight;

        var dWidth = oLogin.offsetWidth;

        oLogin.style.top = (wHeight - dHeight) / 2 + "px";

        oLogin.style.left = (wWidth - dWidth) / 2 + "px";

        var oClose = document.getElementById("close")

        oClose.onclick = function() {

            document.body.removeChild(oMask);

            document.body.removeChild(oLogin);

        }

        oMask.onclick = function() {

            document.body.removeChild(oMask);

            document.body.removeChild(oLogin);

        }

    }

function show()

{

        //                获取页面高度和宽度

        var sHeight = document.documentElement.scrollHeight;

        var sWidth = document.documentElement.scrollWidth;

        //                alert(sHeight);

        //                alert(sWidth);

        //                可视区域的高度和宽度

        var wHeight = document.documentElement.clientHeight;

        var wWidth = document.documentElement.clientWidth;

        //                alert(sHeight);

        //                alert(sWidth);

        var oMask = document.createElement("div");

        oMask.id = "mask";

        oMask.style.height = sHeight + "px";

        oMask.style.width = sWidth + "px";

        document.body.appendChild(oMask);

        var oLogin = document.createElement("div");

        oLogin.id = "login";

        oLogin.innerHTML = '<div class="loginCon"><div class="loginCon"><div class="login"><ul><li><span><label for="zhanghao">账号：&nbsp;&nbsp;&nbsp;</label></span><input id="zhanghao " type="text" style="height:23px"></li><li><span><label for="yonghuming">用户名：</label></span><input id="yonghuming" type="text" style="height:23px"></li> <li><span><label for="password">密码：</label></span><input id="password" type="password"></li><li><span><label for="password">确认密码：</label></span><input id="password" type="password"></li><li class="li4"><input class="submit" type="submit" value="提交"></li></ul></div></div><div id="close">×<div></div>'; 

        document.body.appendChild(oLogin);

        var dHeight = oLogin.offsetHeight;

        var dWidth = oLogin.offsetWidth;

        oLogin.style.top = (wHeight - dHeight) / 2 + "px";

        oLogin.style.left = (wWidth - dWidth) / 2 + "px";

        document.getElementById("close").onclick = function() {

            document.body.removeChild(oMask);

            document.body.removeChild(oLogin);

        }

        document.getElementById("login").onclick = function() {

            document.body.removeChild(oMask);

            document.body.removeChild(oLogin);

        }

}

</script>

登录和注册（Js）的写法的更多相关文章

vue.js实现用户评论、登录、注册、及修改信息功能
vue.js实现用户评论.登录.注册.及修改信息功能:https://www.jb51.net/article/113799.htm
老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
yii2.0 输出url 注册js css文件
//输出url <a href="<?= Url::to(['/users/login/login','id'=>5,'mark'=>true]) ?>&qu ...
PHP实现登录，注册，密码修改
注册,登录,修改密码 1.登录 2.忘记密码 3.免费注册页面布局 <div id="views" class="views"> <div ...
PHP用户登录与注册页面
PHP用户登录模块实现项目包含的功能脚本: login.php//登录 reg.php//注册用户 user_add.php//注册校验脚本 user_login_check.php//登录校验脚本 ...
Django用户登录与注册系统
一.创建项目 1.1.创建项目和app python manage.py startproject mysite_login python manage.py startapp login 1.2.设 ...
Django实战(一)-----用户登录与注册系统6（session会话、注册视图）
因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的. 通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于 ...
mybatis 和servlet使用MVC实现用户登录，注册，退出
普通实现: USerMapper.java: package com.bjsxt.mapper; import org.apache.ibatis.annotations.Param; import ...
我的Vue之旅、05 导航栏、登录、注册 (Mobile)
第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...

随机推荐

freemarker实现自定义指令和自定义函数
自定义指令: 1.指令在前台实现 <#macro name param1,param2,param3...paramN> </#macro> 2.指令在后台实现 1.实现Tem ...
POJ1167 The Buses
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6234 Accepted: 1698 Description A man ...
【NOIP2016练习】T1 string （计数）
题意: 思路: ; ..]of int64; n,k,i:longint; ans,x,y:int64; s,t:ansistring; function c(x,y:longint):int64; ...
[LeetCode] Minimum Window Substring 散列映射问题
题目: Given a string S and a string T, find the minimum window in S which will contain all the charact ...
【Visual Studio】LNK2038: mismatch detected for 'RuntimeLibrary': value 'MTd_StaticDebug' doesn't match value 'MDd_
出现这个问题的原因:工程在转换过程中,发现有一些工程使用MD编译选项,有一些工程使用MTD编译选项,导致静态和动态连接MSVC的连接库有冲突.将全部工程改变MT或MTD编译,即可以解决. 工程 —&g ...
本地测试IIS，Post调用接口
最近在学习三种调用接口方式,POST,Socket,Webserivce,今天刚写完POST方式所以就分享下,欢迎高手指点. public string strResult = "" ...
AC日记——dispatching bzoj 2809
2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3290 Solved: 1740[Submi ...
Codeforces 934 C.A Twisty Movement-前缀和+后缀和+动态规划
C. A Twisty Movement time limit per test 1 second memory limit per test 256 megabytes input standa ...
找小于N 的所有质数
笔试题目当中,找素数出现的几率有点大.昨天就做了一个,感觉不是很难,但可以考查程序员的数学和编码功底. 用嵌套循环来实现是很理想的,怎样减少循环的次数?怎样求出小于N的所有质数? 不可能将一个数除与所 ...
网络数据嗅探工具HexInject
网络数据嗅探工具HexInject 网络数据嗅探是渗透测试工作的重要组成部分.通过嗅探,渗透人员可以了解足够多的内容.极端情况下,只要通过嗅探,就可以完成整个任务,如嗅探到支持网络登录的管理员帐号 ...

登录和注册（Js）的写法

登录和注册（Js）的写法的更多相关文章

随机推荐

热门专题