Android|Android 程序员搞 web 之 webApi （十四） Android程序员搞web之webApi（十四

一、BOM
1、基础知识浏览器中的顶级对象：window ；
页面中的的顶级对象：document ；
页面中的对象都是浏览器的，页面的内容也都是 window 的；
2、系统对话框 alter () 确定对话框；
prompt （）输入对话框；
confirm（）确定取消对话框；
工作中的对话框都是自己制作的。
3、onload 事件如下方式书写，可以将 js 逻辑写在 head 标签内

Title - 锐客网

4、onunload 事件---页面关闭之后的事件

5、onbeforeunload 事件 ---页面打开前事件

6、location 对象 location . href= "https://www.it610.com/article/链接地址" ； //属性可以加载引号内的链接
location . assign("链接地址") ; //方法可以加载引号内的链接
以上两个的实现效果一样
location . reload () ; //刷新界面
location . replace("链接地址"); //对当前界面进行替换，没有返回键
7、history 对象 window . history . back(); //后退
window . history.forward(); //前进
window . history .go() ; //go（）函数内的参数为负值是后退，为正值则是前进；
8、navigator window . navigator . platform ; // 获取浏览器所在的系统平台类型；
9、定时器创建定时器

每隔两秒弹出一次弹窗。
停止定时器

10、一次性的定时器

虽然是一次性，但是需要进行清理，否则会占用内存。
案例
定时器效果

你注册呀

11、div 渐变

二、练习--轮播图

轮播图效果
轮播图源码
三、offset 系列
1、获取元素即控件的尺寸获取结果为 number 类型；
获取宽：offsetWidth
获取高：offsetHeight
获取距离上浏览器边界距离：offsetTop
获取距离左浏览器边界距离：offsetLeft
2、注意 1）、当控件在文档流内时：自己的位置是，自己相当于浏览器的绝对位置的距离即：父级控件位置+父级控件margin+父级控件padding+自己margin；
2）、控件脱离文档流时：自己位置是自己相对于父级控件的位置即：自己的位置（left、top什么的）+自己的 margin；
3、获取系统指定标签 1）、获取 body document.body;
2)、获取 title document.title;
3)、获取 html document.documElement;
四、scroll 系列
scrollWidth：元素中内容的实际宽（没有边框），如果没有内容就是元素的宽；
scrollHeight：元素中内容的实际高(没有边框)，如果没有内容就是元素的高；
scrollTop：元素向上卷曲的距离；
scrollLeft：元素向左卷曲的距离；
封装浏览器页面向上滑动距离和向左滑动距离函数

/** * 获取浏览器页面滑动距离 * @returns {{top: number, left: number}} top为向上滑动距离，left为向左滑动距离 */ function getScroll() { return { top: window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop || 0, left: window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft || 0 }; }

五、获取任意元素任意样式属性的值

/** *获取任意属性的值 * @param element 元素对象 * @param attr 属性 * @returns {any} 所需值 */ function getStyle(element, attr) {return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]; }

六、改变任意元素的任意属性

/** *改变任意元素的任意属性动画 * @param element 元素对象 * @param json json类型的属性例如{"width": 900, "height": 400} */ function animation(element, json) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true; for (var attr in json) { var current = parseInt(getStyle(element, attr)); var target = json[attr]; //变换数值 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current + "px"; if (current !== target) { flag = false; } }//到达指定数值 if (flag) { clearInterval(element.timeId); } console.log("目标：" + target + "，当前：" + current + "，变化的数据：" + step); }, 20) }/** *获取任意属性的值 * @param element 元素对象 * @param attr 属性 * @returns {any} 所需值 */ function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]; }

七、改变任意元素任意属性，并添加回调函数，实现持续动画

/** *改变任意元素的任意属性动画 * @param element 元素对象 * @param json json类型的属性例如{"width": 900, "height": 400} */ function animation(element, json, fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true; for (var attr in json) { var current = parseInt(getStyle(element, attr)); var target = json[attr]; //变换数值 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current + "px"; if (current !== target) { flag = false; } }//到达指定数值 if (flag) { clearInterval(element.timeId); if (fn) { fn(); } } console.log("目标：" + target + "，当前：" + current + "，变化的数据：" + step); }, 20) }/** *获取任意属性的值 * @param element 元素对象 * @param attr 属性 * @returns {any} 所需值 */ function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]; } //展示效果 getId$("btn").onclick = function () { var json1 = {"width": 900, "height": 400}; animation(getId$("dv"), json1, function () { var json2 = {"width": 90, "height": 40}; animation(getId$("dv"), json2, function () { animation(getId$("dv"), json1, function () { animation(getId$("dv"), json2, function () {}) }) }) }) };

实现效果

文章图片
实现效果八、client 系列表示可视区域
clientWidth：可视区域宽度没有边框边框内部的区域；
clientHeight：可视区域高度没有边框边框内部区域；
clientLeft：左边边框的宽度
九、小知识点
1、获取浏览器可是界面任意坐标点

/** * 获取浏览器任意界面的点坐标 * *ev = window.event || ev; 用于适配ie 8 * * @param ev 针对于google浏览器和火狐浏览器的参数 * */ document.onmouseover = function (ev) { ev = window.event || ev; getId$("ts").style.left = ev.clientX+ "px"; getId$("ts").style.top = ev.clientY+ "px"; console.log(ev) }

2、任何浏览器获取鼠标位置

/** * 获取任意浏览器的鼠标任意位置坐标 * @type {{getEvent: (function(*): Event | *), getPageY: (function(*=): any), getScrollTop: (function(): number), getPageX: (function(*=): any), getEventY: (function(*=): number), getScrollLeft: (function(): number), getEventX: (function(*=): number)}} */ var evt = { getEvent: function (e) {return window.event || e; }, //可视区域横坐标位置 getEventX: function (e) { return this.getEvent(e).clientX; }, //可视区域纵坐标位置 getEventY: function (e) { return this.getEvent(e).clientY; }, //页面向左卷曲的横坐标 getScrollLeft: function () { return window.pageXOffset || document.body.scrollLeft || document.documentElement.offsetLeft || 0; }, //页面向上卷曲的纵坐标 getScrollTop: function () { return window.pageYOffset || document.body.scrollTop || document.documentElement.offsetTop || 0; }, //相对于页面的横坐标 getPageX: function (e) { return this.getEvent(e).pageX ? this.getEvent(e).pageX : this.getEventX(e) + this.getScrollLeft(); }, //相对于界面的纵坐标 getPageY: function (e) { return this.getEvent(e).pageY ? this.getEvent(e).pageY : this.getEventY(e) + this.getScrollTop(); } }; //使用样例 getId$("div").onmouseover=function(ev){ getId$("div").style.left = evt.getPageX(ev); }

3、阻止浏览器默认事件 ie 8 使用 return false；进行阻止，
谷歌和火狐使用 e.preventDefault(); 进行阻止。
4、阻止事件冒泡 ie8 使用 window.event.cancleBubble=true；
谷歌和火狐使用 e.stopPropagation();
5、元素隐藏的方式 【Android|Android 程序员搞 web 之 webApi （十四）】（1）、元素.style.display="none"; 隐藏不占位
（2）、元素.style.visibility="hidden"; 隐藏占位
（3）、元素.style.opacity=0; 隐藏占位
（4）、元素.style.height="0px";
元素.style.border="0px solid color"；隐藏占位