简单的总结下用 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. 初步了解php，实现注册及登录

    直接上图(数据库是用wamp实现的) 注册页 html 及 php 代码 登陆页 html 及 php 代码

  2. 必须熟悉的vim快捷键操作

    转载请表明出处http://www.dabu.info/?p=801 Vim/Vi 没有菜单,只有命令 Vim/Vi 工作模式介绍:插入模式 和  命令模式 是vi的两个基本模式.——插入模式 ,是用 ...

  3. STM8的GPIO驱动

    芯片的外设一般按照这么几个流程来进行,GPIO,外部中断,定时器,串口,ADC,IIC,SPI,下面我就按照各个模式来写 首先是GPIO,STM8的GPIO拥有复用功能,这句话告诉我们必然需要配置IO ...

  4. stm32 DMA数据搬运 [操作寄存器+库函数]（转）

    源:stm32 DMA数据搬运 [操作寄存器+库函数]        DMA(Direct Memory Access)常译为“存储器直接存取”.早在Intel的8086平台上就有了DMA应用了.   ...

  5. IOS第三方数据库--FMDB 分类： ios技术 2015-03-01 09:38 57人阅读 评论(0) 收藏

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...

  6. 【spoj7528】 Lexicographical Substring Search

    http://www.spoj.com/problems/SUBLEX/ (题目链接) 题意 给出一个字符串,询问其中字典序第K小的子串. Solution 后缀自动机例题. 构出后缀自动机以后,对每 ...

  7. Oracle的一些命令

    sqlldr: 一般用于导入以任何后缀结束的文件,我这次就是因为要导入一张以.20160101为后缀的文件,当初简直束手无策 结合input.ctl使用,可以在DOS下使用,可以对一张表导入数十万,百 ...

  8. java web面试

    1. session和cookie的区别和联系,session的生命周期,多个服务部署时session管理. 原博http://blog.csdn.net/shuaishenkkk/article/d ...

  9. 【USB-HID在STM32上的实现】-00-开始

    前一段时间参照网上的例程搞了一阵STM32F103的HID程序,改了改例子实现了一个摇杆的外设控制功能.1通道开关量输入,2通道模拟量输入. 之后有空了总结一下,防止忘记.

  10. tomcat 安全文件夹（Java之负基础实战）

    tomcat 解析网站的时候,会寻找一个文件叫  WEB-INF 这些文件外部无法访问