javascript每日一练(五)——BOM
一、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的更多相关文章
- javascript每日一练(一)——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- javascript每日一练(九)——运动一:匀速运动
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
- javascript每日一练(八)——事件三:默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
随机推荐
- linux shell awk 流程控制语句(if,for,while,do)详细介绍
在linux awk的 while.do-while和for语句中允许使用break,continue语句来控制流程走向,也允许使用exit这样的语句来退出.break中断当前正在执行的循环并跳到循环 ...
- 0课程介绍(Week1,3月3日)
一.自我介绍 1.姓名:杨晔 2.办公室:B211-2 3.电子邮件:yangye@zjjy.com.cn 4.QQ:6706892 5.博客:http://www.cnblogs.com/meety ...
- docker 数据盘映射方案
docker run -itd -v /data/:/data1 centos bash // -v 用来指定挂载目录, :前面的/data为本地目录,:后面的/data1 为容器里的目录: dock ...
- ALEXANDER WANG 北京旗舰店开业活动
ALEXANDER WANG 北京旗舰店开业活动-搜狐女人 ALEXANDER WANG 北京旗舰店开业活动
- MySQL 讨厌哪种类型的查询
㈠ 任何查询都讨厌 只要是查询.MySQL都讨厌.执行查询最快的方式就是不去执行 缓存为王.比如Redis或者memcache ㈡ 查 ...
- MVC 返回 view
RedirectToAction(),即直接返回相同Controller的Index方法: 这个方法还有其他重载方法,比如第二个参数是Controller名,可以指定其他Controller下的Vie ...
- CocoaPods的安装使用和常见问题
一.什么是CocoaPods CocoaPods是iOS项目的依赖管理工具,该项目源码在Github上管理.开发iOS项目不可避免地要使用第三方开源库,CocoaPods的出现使得我们可以节省设置和第 ...
- c++ 虚析构函数[避免内存泄漏]
c++ 虚析构函数: 虚析构函数(1)虚析构函数即:定义声明析构函数前加virtual 修饰, 如果将基类的析构函数声明为虚析构函数时,由该基类所派生的所有派生类的析构函数也都自动成为虚析构函数. ...
- randn命令中randn('state')和randn('seed')的不同
(1)RANDN产生正态分布数的语法: RANDN(N) :产生N× N的矩阵,其元素是按正态分布的数组: RANDN(M,N) and RANDN([M,N]):产生M×N的矩阵: RANDN ...
- [Swust OJ 179]--火柴棍(找规律)
题目链接:http://acm.swust.edu.cn/problem/0179/ Time limit(ms): 1000 Memory limit(kb): 65535 Descriptio ...