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 :上面的边框的宽度
网友评论