简单的总结下用 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. Android L（5.0）源码之图形与图像处理之图形特效——Matrix

    最近在研究android 5.0的gallery模块,学习了相关的知识点,准备写点博客总结一下,有时间了会补充完整

  2. 一个异步任务接收两个url下载两个图片

    有两个url,一个是下载用户头像的url,一个是下载用户上传图片的url,想要用一个异步任务同时下载这两个图片. 程序的下载任务是这么执行的,先接受url参数,然后调用 imgUrls = infoP ...

  3. [Angular Tutorial] 12 -Event Handlers

    在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...

  4. SQL数据库修复/数据库置疑修复

    SQL数据库修复的三大核心技术: 1.磁盘阵列分析重组技术: 2.数据库恢复与修复技术: 3.SCSI盘物理故障开盘技术. 至今已经成功恢复数百台服务器的SQL数据库,用户覆盖全国. 导致SQL数据库 ...

  5. iOS + UIWebView 实践

    1. 调用java script 现在只能实现弹出窗口 [self.m_webView stringByEvaluatingJavaScriptFromString:@"alert(1)&q ...

  6. 升级R版本后，更新Package

    升级R版本后,若重新安装所有的package将非常麻烦,可以尝试运行一下程序: 1)在旧版本中的R中运行 #--run in the old version of R setwd("C:/T ...

  7. Win7 x64 Eclipse无法识别手机 / adb interface有黄色感叹号，无法识别

    今天公司停电,因此把安卓项目带回宿舍做.宿舍的笔记本,装的是Win7 x64,手机连上电脑后,windows可以识别,但Eclipse的DDMS中却无法识别,什么都没有: 然后打开设备管理器查看,发现 ...

  8. Spring学习笔记IOC与AOP实例

    Spring框架核心由两部分组成: 第一部分是反向控制(IOC),也叫依赖注入(DI); 控制反转(依赖注入)的主要内容是指:只描述程序中对象的被创建方式但不显示的创建对象.在以XML语言描述的配置文 ...

  9. 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（四）

    [前言和思路整理] 千呼万唤Shǐ出来!最近莫名被基友忽悠着进舰坑了,加上要肝LL活动,又碰上公司项目紧张经常加班,这一章发得比以往时候来得更晚一些,抱歉啊. 上一章我们实现了BeatObjectMa ...

  10. Android 自定义Activity栈对Activity统一管理

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6307239.html public class AppManager { private static St ...