一、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. design pattern factory method #Reprinted#

    引入人.工厂.和斧子的问题: (1),原始社会时,劳动社会基本没有分工,需要斧子的人(调用者)只好自己去磨一把斧子,每个人拥有自己的斧子,如果把大家的石斧改为铁斧,需要每个人都要学会磨铁斧的本领,工作 ...

  2. QT绘制半透明窗体（改写paintEvent，超级简单）

    在派生类中重载QDialog的void paintEvent(QPaintEvent *)事件,在这个函数中加入以下代码 QPainter painter(this);    QLinearGradi ...

  3. Android dp和sp的用法汇总

    1 > dp 是跟像素密度无关的单位,也就是说在相同尺寸.但不同的分辨率的手机上,用dp标识的东西,显示的大小是一样的. sp是用于标识字体的,它不仅跟屏幕尺寸有关,还跟设置的系统字体大小有关. ...

  4. apache .htaccess文件详解和配置技巧总结

    一..htaccess的基本作用 .htaccess是一个纯文本文件,它里面存放着Apache服务器配置相关的指令.       .htaccess主要的作用有:URL重写.自定义错误页面.MIME类 ...

  5. Swift 自定义炫酷下拉刷新效果

    先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...

  6. iOS开发进阶之 UIWebView

    刚接触IOS开发1年多,现在对于混合式移动端开发越来越流行,因为开发成本上.速度上都比传统的APP开发要好,混合式开发是传统模式与PC网页端相结合的模式.那么提到了 APP的混合模式开发,在Andro ...

  7. VS 2013--工程的创建，scanf报错，常用快捷键，行号设置

    一.创建一个工程(这里是C++,其他的一样的) 在vs页面上点击 文件-->新建-->项目: 会出现如下界面,自己改名字和存贮位置就可以了 确定,然后点击下一步: 这样就建好了一个工程,然 ...

  8. BZOJ 2101: [Usaco2010 Dec]Treasure Chest 藏宝箱( dp )

    dp( l , r ) = sum( l , r ) - min( dp( l + 1 , r ) , dp( l , r - 1 ) ) 被卡空间....我们可以发现 l > r 是无意义的 ...

  9. ViewPager，模仿慕课网

    源码:http://pan.baidu.com/s/1DhM14 使用fragment实现的:http://pan.baidu.com/s/1mgzWlM4 SecondActivity.java p ...

  10. centos下pg_dump的服务器版本不匹配问题

    pg_dump: server version: 9.4.4; pg_dump version: 8.2.4 pg_dump: aborting because of server version m ...