BOM基础部分

打开、关闭窗口

•open

–蓝色理想运行代码功能

•close

–关闭时提示问题

常用属性

•window.navigator.userAgent

•window.location

窗口尺寸、工作区尺寸

•可视区尺寸

–document.documentElement.clientWidth

–document.documentElement.clientHeight

滚动距离

–document.body.scrollTop

–document.documentElement.scrollTop

常用方法和事件

l系统对话框

•警告框：alert(“内容”)，没有返回值

•选择框：confirm(“提问的内容”)，返回boolean

•输入框：prompt()，返回字符串或null

window对象常用事件

•onload 窗口js加载

•onscroll 窗口滚动条

•onresize 窗口改变大小后触发

•例子：回到顶部按钮、侧边栏广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部按钮</title>
<style>
body{ background:#990;}
body input{ background:#066; text-height:5; float:right;}
</style>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var bSys=true;
    var timer=null;
    //判断滚动条真假值！设滚动条默认事件为真
     window.onscroll=function(){
            if(!bSys)
            {clearInterval(timer);}
            bSys=false;
         };
    oBtn.onclick=function()
    {
    timer=setInterval(function(){
        // 获取滚动条处理兼容问题
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //计算速度
            var iSpeed=Math.floor(-scrollTop/8);
        //判断滚动条里浏览器距离是否为0;
            if(scrollTop==0){clearInterval(timer)};
        //浏览器恢复默认继续运行
            bSys=true;
            document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
            },30)
        }
    }
</script>
</head>
<body>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br />117<br />118<br />119<br />120<br />121<br />122<br />123<br />124<br />125<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br />
<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br />
<input id="btn1" type="button" value="回到顶部" />
</body>
</html>

侧边栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页侧边栏</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
 
<script>
//调成窗口大小事件 = 系统执行完事件= 滚动条事件
window.onresize=window.onload=window.onscroll=function()
{
    var oDiv=document.getElementById('div1');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
    startMove(oDiv, {top:scrollTop+t});
 
    }
//获取非行间样式函数封装！
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
        }
    else
    {
        return getComputedStyle(obj, false)[attr];
        }
    }
// 获取对象，json封装要实现的属性
function startMove(obj, json, fn)
{   //关闭定时器
    clearInterval(obj.timer);
    //开定时器
    obj.timer=setInterval(function(){
    //设置第一次循环，所以的值都到达了！
        var bStop=true;
    //循环json里的属性和各个属性的值
        for(var attr in json)
        {
        //取当前值
        var iCur=0;
        //判断属性是否为透明度 处理兼容问题
    if(attr=='opacity')
    {
        iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
        }
    else
    {
        iCur=parseInt(getStyle(obj, attr));
        }
    //算速度
    var iSpeed=(json[attr]-iCur)/8;
    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
    //检查停止
 
    //当前值不等于属性值则执行bstop为假，继续循环
    if(iCur!=json[attr])
    {
        bStop=false;
        }
    //处理透明度问题
    if(attr=='opacity')
    {
        obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
        obj.style.opacity=(iCur+iSpeed)/100;
        }
      else
      {
          obj.style[attr]=iCur+iSpeed+'px';
          }
        }
    //判断属性值是否为真
 if(bStop)
        {
            //关闭obj的定时器
            clearInterval(obj.timer);
            //判断函数里是否有待执行的函数 为真则执行
            if(fn)
            {
                fn();
            }
        }
 
        },30)
        }
</script>
</head>
 
<body style="height:2000px;">
<div id="div1">
</div>
</body>
</html>

–闪烁问题

BOM基础部分的更多相关文章

BOM基础（四）
最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...
BOM基础计时器定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
BOM基础笔记
BOM基础 BOM对浏览器的一些操作 1.打开.关闭窗口 •open –蓝色理想运行代码功能 window.open('http://www.baidu.com/', '_self'); <!d ...
BOM基础
BOM基础打开窗口 window.open('about:blank','_blank') 第一个参数是打开哪一个口,第二个参数是在哪里打开窗口. 关闭窗口 window.close() windo ...
BOM基础（一）
学完了js的基础语法和DOM之后,就要要看看javascript中最后一项BOM了.BOM,全称brower document model,翻译过来就是浏览器对象模型.DOM是文档对象模型,属于BOM ...
JavaScript之BOM基础
BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能.但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象.本文主要以一些简单的 ...
BOM基础（三）
在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...
BOM基础（二）
跟DOM一样,BOM其实也是由很多的API组成. 不过对于BOM来说,最痛苦的不是不记得API,而是明明记得这个这个API,却没有考虑到它的兼容性. 之前的文章中讲到了offset系列的属性,他的宽高 ...
BOM基础知识
1.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容而与浏览器窗口进行交互的对象: 由于BOM主要用于管 ...
JavaScript(第十六天)【BOM基础】
学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法 ...

随机推荐

Nvidia Nsight + .NET
https://devtalk.nvidia.com/default/topic/804306/nsight-4-5-can-t-debug-net-applications/ http://comm ...
init.php 建立自己的前端共享文件
文件位置:include/init.php 1.新建文件lib_xxx.php(lib_liangxin.php) 2.在文件init.php 第74行加入代码 require(ROOT_PATH . ...
最近这么火的iOS视频直播
快速集成iOS基于RTMP的视频推流 http://www.jianshu.com/p/8ea016b2720e iOS视频直播初窥:高仿<喵播APP> http://www.jiansh ...
Java序列化的几种方式以及序列化的作用
Java序列化的几种方式以及序列化的作用本文着重讲解一下Java序列化的相关内容. 如果对Java序列化感兴趣的同学可以研究一下. 一.Java序列化的作用有的时候我们想要把一个Java对象 ...
Nginx IP访问控制，只允许指定的IP地址访问
Nginx可以进行IP访问控制,配置指定的IP地址访问服务器网站今天领导提出一个新的业务需求,网站上线时让外部用户在上线时间段访问到的页面是维护页面,公司内部员工在上线时段可用正常访问公司的网站. ...
verilog描述表决器的两种方式简易分析
命题:设计一个三变量表决器.真值表如下: 可以写出并简化得出公式:F=AB+BC+AC. 以下是两种算法: 第一种:仅从算法方面描述为:A.B.C的和大于1则输出结果为1,否则为0:源码如下: mod ...
nginx -s reload失败
在重启nginx时报错误. wangkongming@ThinkPad-T410 ~ $ sudo /usr/sbin/nginx -s reload nginx: [error] invalid P ...
dijkstra算法求最短路
艾兹格·W·迪科斯彻 (Edsger Wybe Dijkstra,1930年5月11日~2002年8月6日)荷兰人. 计算机科学家,毕业就职于荷兰Leiden大学,早年钻研物理及数学,而后转为计算学. ...
ThinkPHP3.2.3扩展之生成PDF文件（MPDF）
目前是PHP生成PDF文件最好的插件了,今天介绍下在ThinkPHP3.2.3里如何使用. 先安照路径放好如图. 下面是使用方法 public function pdf(){ //引入类库 Vendo ...
vmstat、top
vmstat是一个查看虚拟内存(Virtual Memory)使用状况的工具,使用vmstat命令可以得到关于进程.内存.内存分页.堵塞IO.traps及CPU活动的信息. vmstat 最常用的有两 ...

BOM基础部分

BOM基础部分的更多相关文章

随机推荐

热门专题