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 ...
随机推荐
- win7安装 Apache2.2 PHP5.3 MySQL5.6
. APACHE2.2 经典参考资料 http://blog.csdn.net/yousuosi/article/details/9859507 官方下载地址 http://mirror.bi ...
- NAS简介
转自IBM资料库:https://community.emc.com/docs/DOC-15977 在20世纪80年代初,英国纽卡斯尔大学布赖恩.兰德尔教授 ( Brian Randell)和同事通过 ...
- Python 2.7 学习笔记 中文处理
首先我们在编写python代码文件时,文件本身会采用一种编码格式,如 utf-8 或 gbk 这时我们需要在python文件的开头设置文件的编码格式,以告诉编译器. 如果文件的编码格式是 utf-8, ...
- [移动网关]2G环境下资源下载有一定概率失败,客户端日志显示收到403错误
2G环境下资源下载有一定概率失败,客户端日志显示收到403错误 问题现象: 测试同学在使用联通号码在移动网络环境下,访问连接得到的response_code出现是403,导致资源读取失败表情显示异常. ...
- redis缓存工具Jedis进行跨jvm加锁(分布式应用)--不幸暂弃用--能够做第三方锁使用
近期使用redis碰到了多个并发处理同一个缓存的情况.在这样的情况下须要进行加锁机制. 本来想使用java自带的ReadWriteLock进行设置读写锁,这也是上家公司使用的方法. 后来经过商讨,给予 ...
- 在storyboard中设置控件的layerbordercolor
在SB中控件可以在SB中直接利用kvc 设置一些属性值,不如layerwidth等 但是不能更改和颜色有关的属性因为layerbordercolor是CGColor.通过为CALayer增加属性可以实 ...
- [转]Centos6.5安装配置keepalived
参考博文: Centos6.5安装配置keepalived CentOS6.5 keepalived详解及实现Nginx服务的高可用性 CentOS6.5 LVS + KeepAlived搭建步骤 我 ...
- PHP学习笔记4-类/命名空间/成员方法/类方法
命名空间 namespace 类 class创建文件Hello.php,namespace是jikexueyuan: <?php /** * Created by PhpStorm. * U ...
- Hadoop集群的安装与配置(centos 6.5)
一.Hadoop搭建准备(centOs6.5 且每个系统都要有同一个用户,如:hadoop) 1.IP的配置 包括Master和Slaves的IP配置,之间能够相互ping通: 例如: ...
- C++获取当前时间和计算程序运行时间的方法
C++获取当前时间和计算程序运行时间的方法 获取当前时间: #include <iostream> #include <Windows.h> using namespace s ...