webapi 学习笔记2 BOM

script 页面中的所有变量,其实都是浏览器的对象中的属性

例如 var num = 10;

实际上是window.num

window是浏览器中的顶级对象,只是window可以不写出来

BOM还有三大系列:

1. offset系列

2. scroll系列

3. 

1. onload加载页面事件


2. location对象


3. history对象

跟浏览器上左右箭头功能相同,读取history历史,进行页面跳转


4. navigator对象

通过userAgent可以判断用户浏览器的类型

    console.log(window.navigator.userAgent);

    //通过platform可以判断浏览器所在的系统平台类型.

    //console.log(window.navigator.platform);


5. 定时器

5.1 第一种:永久定时器

timerId = setInterval(func, timeout);

clearInterval(timerId);


5.2 第二种:一次性定时器

timerId = setTimeout(func, timeout);

clearTimeout(timerId);


6. 三大系列之系列一:offset系列

js不能直接获取到定义在<head></head>里的<style></style>中的属性值,只能通过obj.offsetXxxx来获取

offsetWidth和offsetHeight获取的是元素的宽高,而真实内容的宽高只能通过scrollWidth和scrollHeight来获取


7. 完整轮播图的思路

    * 1. 根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用

    * 为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变量中,pic

    * 2. 创建li之后,1---设置ol中第一个li有默认的背景颜色,2---把ul中的第一个li克隆一下(无缝连接的效果)追加到ul中所有的li的最后面(无缝效果:页面中的第一个图片和最后一个图片是同一个图片)

    * 3.左右焦点的div显示和隐藏

    * 4.为左右按钮注册点击事件

    *  每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是5),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片

    *  设置小按钮的背景颜色

    *  左边按钮,需要判断pic值是不是0,如果是0此时pic=5,ul的left为5*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第五个图片

    *  5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数


8. 三大系列之系列二:scroll系列

* scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽

  * scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高

//my$("btn").onclick=function () {

//  //console.log(my$("dv").offsetWidth);//元素的宽,有边框

//  //console.log(my$("dv").offsetHeight);//元素的高,有边框

// 

//  //console.log(my$("dv").scrollWidth);//元素中内容的实际的宽

//  //console.log(my$("dv").scrollHeight);//元素中内容的实际的高

//  console.log(my$("dv").scrollTop);//向上卷曲出去的距离

//  console.log(my$("dv").scrollLeft);//向左卷曲出去的距离

//};


9. 三大系列之系列三:client系列

    * client系列:可视区域

    * clientWidth:可视区域的宽(没有边框),边框内部的宽度

    * clientHeight:可视区域的高(没有边框),边框内部的高度

    * clientLeft:左边边框的宽度

    * clientTop :上面的边框的宽度

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342