简单的总结下用 javascript DOM 实现简易登录框例子，下面是简单的模拟登录，没有具体的登录样子，但只是模拟，整理下思路。

页面简单布局，我这个确实太简单了，看代码：

<body>

        <div id="box"></div>

</body>

这里给 box 简单的样式：

#box {

                width: 400px;

                height: 300px;

                background: #ccc;

                border: 10px solid #f00;

    }

现在页面的效果如下图：

系统登录通常情况下是在页面中居中显示，我们用 css 的方式也可以让它居中，给 box 加上下面的代码：

css ①

position: absolute;

left: 50%;

top: 50%;

margin-left: -210px;

margin-top: -160px;

css ②

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

加上css ① 或者 css ② 都可以，效果如下：

接下来，我们看下 javascript 让登录框居中的方法：

<script>

            /*

             *  元素的 left  = (可视区的宽度 - 元素的宽度)/2

             *  元素的 top  = (可视区的高度 - 元素的高度)/2

             */

            window.onload = function(){

                var box = document.getElementById("box");

                // l   left的值

                var l = (document.documentElement.clientWidth - box.offsetWidth)/2;

                // t  top的值

                var t = (document.documentElement.clientHeight - box.offsetHeight)/2;

                /*box.style.left = l + 'px';

                box.style.top = t + 'px';*/

            }

        </script>

我们也可以考虑用更简单的方法，用 position：fixed;方法同样也可以实现。

作者：白开水

出处：http://www.cnblogs.com/hongxp/

本文以学习、总结和分享为主，如需转载，请联系本人，标明作者和出处，非商业用途！

js DOM操作---登录例子总结的更多相关文章

  1. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  5. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  6. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  7. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  8. JS DOM操作（二） Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  9. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

随机推荐

  1. libtask channel机理及调度理解

    学习golang的时候libtask库的代码是一定要看的,需要深入理解chan和携程的运行机制,下面就结合libtask的源码说明下运行原理,如果理解的有偏差欢迎指正 下面是libtask中Chann ...

  2. iOS Socket第三方开源类库 ----AsyncSocket 分类： ios相关 ios技术 2015-03-11 22:14 59人阅读 评论(0) 收藏

    假如你也是一个java程序员,而你又不是很懂Socket. 下面我的这篇文章也许能帮助你一些. http://xiva.iteye.com/blog/993336 首先我们写好上面文章中的server ...

  3. ZOJ 1011 - NTA

    题目大意:有一颗完全二叉树,给节点一个信号会从一个表中选择一对信号分别传递给两个子节点.最后判断所有叶子节点是否满足给定的规则.题目有点长,具体可参见原题. 首先是表格中数据的存储,由于会有多个元素, ...

  4. HTML5学习笔记一：与html4的区别（整合）

    一 语法的改变 1.1 HTML5中标记方法 1.内容类型(ContentType):扩展符仍为“.html”或".htm",内容类型仍是“text/html”. 2.DOCTYP ...

  5. JDBC连接sql server数据库的详细步骤和代码

    JDBC连接sql server数据库的详细步骤和代码 JDBC连接sql server数据库的步骤如下: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Ja ...

  6. Chrome调试大全

    作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...

  7. 使用spring的JavaMailSender发送邮件

    一:pom.xml <!-- java邮件 -->      <dependency>          <groupId>javax.mail</group ...

  8. js框架Modernizr是什么东西？ 他是前端开发HTML5和CSS3的强有力前端js检测类库

    最近在研究modernizr的前端框架,发现这个Modernir对前端写页面非常友好,并且能够很快的建立起适应任何设备的html页面哦.在这里分享下基础教程,让大伙对modernizr是什么?做什么用 ...

  9. Ionic在线打包IOS平台应用

    参见:http://docs.ionic.io/services/profiles/#ios-app-certificate--provisioning-profile Ionic云编译,需要注册.地 ...

  10. Spark算子总结及案例

    spark算子大致上可分三大类算子: 1.Value数据类型的Transformation算子,这种变换不触发提交作业,针对处理的数据项是Value型的数据. 2.Key-Value数据类型的Tran ...