一、BOM打开，关闭窗口

　　window.open();　　window.close();

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function()
{
    var oBtn = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');

    oBtn.onclick = function(){
        var oNewWin = window.open('about:blank');

        oNewWin.document.write(123);
    };

    oBtn2.onclick = function(){
        window.close();
    };            

};
</script>
</head>

<body style="height:2000px;">
<button id="btn1">open</button><button id="btn2">close</button>
</body>
</html>

二、BOM常用属性

　　window.navigator.userAgent;　　window.loaction;

三、BOM侧边栏随窗口滚动(广告浮窗)

　　可视区高/宽度:　　document.documentElement.clientHeight/clientWidth;

　　滚动条滚动距离：　document.documentElement.scrollTop || document.body.scrollTop;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
<script>
window.onload = window.onresize = window.onscroll = function(){
    var oDiv = document.getElementById('div1');
    var iScrollTop = document.body.scrollTop || document.documentElement.scrollTop;    //获取滚动条距离顶部高度
    var iH = document.documentElement.clientHeight;    //获取可视区高度

    oDiv.style.top = iScrollTop + (iH - oDiv.offsetHeight) / 2 + 'px';
};
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

四、BOM回到顶部　　

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
button{ position:fixed; right:0; bottom:0;}
</style>
<script>
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    var timer = null;
    var bSys = true;

    window.onscroll = function(){
        if(!bSys){
            clearInterval(timer);
        }        

        bSys = false;
    };

    oBtn.onclick = function(){
        timer = setInterval(function(){
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var iSpeed = Math.floor((-scrollTop / 8));

            if(scrollTop == 0){
                clearInterval(timer);
            }

            bSys = true;
            document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
        }, 30);
    };
};
</script>
</head>

<body style="height:2000px;">
<button id="btn1">回到顶部</button>
</body>
</html>

javascript每日一练（五）——BOM的更多相关文章

  1. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  2. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  3. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  4. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  6. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  7. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  8. javascript每日一练（九）——运动一：匀速运动

    一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动 ...

  9. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

随机推荐

  1. 转: seajs手册与文档之 -- 模块标识

    目录 模块标识 相对标识 顶级标识 普通路径 文件后缀的提示 模块标识 模块标识是一个字符串,用来标识模块.在 require. require.async 等加载函数中,第一个参数都是模块标识.de ...

  2. How do I Find Out Linux CPU Utilization?

    From:http://www.cyberciti.biz/tips/how-do-i-find-out-linux-cpu-utilization.html Whenever a Linux sys ...

  3. KBMMW SampleService/SampleClient方式传输数据集

    马上周末了,趁着下午这会儿回顾一下这几天对旧项目的升级过程,一些重要但不常用的东西记录下来是很有必要的.其中一个项目中对KBMMW的远程数据通讯方式做了改进,利用SampleService/Sampl ...

  4. cocos2D（二）---- cocos2D文档的使用

    在使用cocos2d进行游戏开发的过程中,难免要查阅cocos2d的API文档.搞清楚怎么使用某个类或者某个方法.幸运的是,cocos2d的作者已经在源码里面加入了文档凝视,我们仅仅须要使用文档生成工 ...

  5. 企业级IM应该帮助员工提高绩效，避免无关的信息干扰

    很多上班族一定熟悉如下的场景: 您早上上班一打开QQ,就弹出一个新闻集成窗口,随便点开看看吧,这一点不要紧,您就被一个又一个的链接带着逛下去了.等回过神来要工作的时候,发现已经在这些八卦新闻上浪费了一 ...

  6. QT 入门 -QApplication QPushButton QDialog Ui类型的手工使用

    QT 1.工具 assistant  帮助文档 qtconfig  QT配置工具 qmake     QT的make与项目文件智能创建工具 uic          UI界面的设计文件的编译工具 mo ...

  7. ListActivity的注意点

    有的时候我们需要集成ListActivity,注意点1,这个时候我们的xml中的<ListView>标签中的id属性不能够随便自己命名,而是要固定为android:id="@id ...

  8. POJ 1159 回文LCS滚动数组优化

    详细解题报告可以看这个PPT 这题如果是直接开int 5000 * 5000  的空间肯定会MLE,优化方法是采用滚动数组. 原LCS转移方程 : dp[i][j] = dp[i - 1][j] + ...

  9. POJ 1861 Network (模版kruskal算法)

    Network Time Limit: 1000MS Memory Limit: 30000K Total Submissions: Accepted: Special Judge Descripti ...

  10. UltraEdit for mac 3.2.0.10免费破解版下载！！

    http://www.mactech.cn/a/108.html UltraEdit for mac 3.2.0.10破解版下载地址 看很多朋友不知道算号器的使用方法,分享如下: 1. 解压Ultra ...