一、BOM打开，关闭窗口

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function()
  8. {
  9.     var oBtn = document.getElementById('btn1');
  10.     var oBtn2 = document.getElementById('btn2');
  11.  
  12.     oBtn.onclick = function(){
  13.         var oNewWin = window.open('about:blank');
  14.  
  15.         oNewWin.document.write(123);
  16.     };
  17.  
  18.     oBtn2.onclick = function(){
  19.         window.close();
  20.     };            
  21.  
  22. };
  23. </script>
  24. </head>
  25.  
  26. <body style="height:2000px;">
  27. <button id="btn1">open</button><button id="btn2">close</button>
  28. </body>
  29. </html>

二、BOM常用属性

　　window.navigator.userAgent;　　window.loaction;

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

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

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
  8. </style>
  9. <script>
  10. window.onload = window.onresize = window.onscroll = function(){
  11.     var oDiv = document.getElementById('div1');
  12.     var iScrollTop = document.body.scrollTop || document.documentElement.scrollTop;    //获取滚动条距离顶部高度
  13.     var iH = document.documentElement.clientHeight;    //获取可视区高度
  14.  
  15.     oDiv.style.top = iScrollTop + (iH - oDiv.offsetHeight) / 2 + 'px';
  16. };
  17. </script>
  18. </head>
  19.  
  20. <body style="height:2000px;">
  21. <div id="div1"></div>
  22. </body>
  23. </html>

四、BOM回到顶部　　

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. button{ position:fixed; right:0; bottom:0;}
  8. </style>
  9. <script>
  10. window.onload = function(){
  11.     var oBtn = document.getElementById('btn1');
  12.     var timer = null;
  13.     var bSys = true;
  14.  
  15.     window.onscroll = function(){
  16.         if(!bSys){
  17.             clearInterval(timer);
  18.         }        
  19.  
  20.         bSys = false;
  21.     };
  22.  
  23.     oBtn.onclick = function(){
  24.         timer = setInterval(function(){
  25.             var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  26.             var iSpeed = Math.floor((-scrollTop / 8));
  27.  
  28.             if(scrollTop == 0){
  29.                 clearInterval(timer);
  30.             }
  31.  
  32.             bSys = true;
  33.             document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
  34.         }, 30);
  35.     };
  36. };
  37. </script>
  38. </head>
  39.  
  40. <body style="height:2000px;">
  41. <button id="btn1">回到顶部</button>
  42. </body>
  43. </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. django 基础入门（二）

    一.关于数据库 1.首先django 1.9以上等版本不支持pymysql,因此需要做一些调整. 比如在settings.py 加入一段代码: import pymysql pymysql.insta ...

  2. 《Python学习手册》

    读书笔记请见Github博客:http://wuxichen.github.io/Myblog/reading/2014/10/04/LearningPython.html

  3. Poj 2092 Grandpa is Famous(基数排序)

    题目链接:http://poj.org/problem?id=2092 思路分析:先统计数据,在根据Count降序排序,Count相等时按照Num升序排序:再输出Count第二大的所有Num: 代码如 ...

  4. UVA 103 Stacking Boxes (dp + DAG上的最长路径 + 记忆化搜索)

     Stacking Boxes  Background Some concepts in Mathematics and Computer Science are simple in one or t ...

  5. JS获取中文拼音首字母，并通过拼音首字母高速查找页面内的中文内容

    实现效果: 图一: 图二: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGVzdGNzX2Ru/font/5a6L5L2T/fontsize/400/f ...

  6. for循环语句之棋盘放粮食、百鸡百钱、纸张的折叠问题

    1.棋盘放粮食 ; ; i < ; i++) { ; ; j <= i; j++) { x = x * ; } lszl = lszl + x; } double zl = lszl * ...

  7. 【Web】java date 到 Oracle date 精确到时分秒

    有两种方法: java.util.Date startTime=new Date("2014/01/01 23:00:00"); 1.new Timestamp(startTime ...

  8. iOS Development: Proper Use of initWithNibName:bundle: Affects UITableViewController

    Address:http://www.outofcore.com/2011/07/ios-development-proper-use-of-initwithnibnamebundle-affects ...

  9. [Swust OJ 541]--排列字典序问题

    题目链接:http://acm.swust.edu.cn/problem/0541/ Time limit(ms): 2000 Memory limit(kb): 65535 n个元素{1,2,... ...

  10. Android中EditText，Button等控件的设置

    EditText可以使用:TextView.setEnabled(true)来设置为可编辑,其实很简单,写在这里以便以后自己查看. Button设置可用性:setVisibility(View.VIS ...