BOM：Browser Object Model ==> 兼容性极差 主要讲一些通用的
计时器
计时器是异步的，当时机成熟之后才会执行
计时器会返回一个数字，该数字表示计时器的编号
- setTimeout方法：指定时间到达后运行某个函数
- clearTimeout方法：清除计时器
- setInterval方法：指定间隔时间到达后运行某个函数
- clearInterval方法：清除计时器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>setTimeout</title></head><body><button id="btn1">点击开始</button><button id="btn2">清除计时器</button><script>var timer1, timer2, timer3;btn1.onclick = function() {//3000毫秒之后，运行指定的函数// [注意] 计时器是异步的, 当时机成熟之后才会执行// 所以 下面这三个计时器 几乎是同时开始计时的timer1 = setTimeout(function() {console.log("计时完成1");}, 3000);timer2 = setTimeout(function() {console.log("计时完成2");}, 3000);timer3 = setTimeout(function() {console.log("计时完成3");}, 3000);// 计时器会返回一个数字, 该数字表示计时器的编号console.log(timer1, timer2, timer3);console.log("点击事件");}btn2.onclick = function() {clearTimeout(timer1);clearTimeout(timer2);clearTimeout(timer3);}</script></body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>利用递归的思想 ==> 强行将setTimeOut 模拟成 setInterval</title><style>h1 {text-align: center;}</style></head><body><h1>0</h1><button id="btn1">点击开始</button><button id="btn2">清除计时器</button><script>// 在工作中 可能会见到下面种种写法 来代替 setInterval 这是因为 setInterval 存在一些小问题var timer1, num = 0;var h1 = document.querySelector("h1");btn1.onclick = function () {interval(function () {num++;h1.innerHTML = num;}, 300);}// 思考 ==> 无限递归 ==> 栈溢出问题// 在本案例中 setTimeout(function () {}, duration) 是异步执行的 该函数瞬间就执行完了 然后就会被销毁 所以不会导致栈溢出function interval(callback, duration) {timer1 = setTimeout(function () {callback();/* callback 函数function () {num++;h1.innerHTML = num;} */interval(callback, duration);}, duration);}btn2.onclick = function () {clearTimeout(timer1);}</script></body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>setInterval</title><style>h1 {text-align: center;}</style></head><body><h1>0</h1><button id="btn1">点击开始</button><button id="btn2">清除计时器</button><script>var timer1, num = 0;var h1 = document.querySelector("h1");btn1.onclick = function() {timer1 = setInterval(function() {num++;h1.innerHTML = num;}, 300);}btn2.onclick = function() {clearInterval(timer1);}</script></body></html>
[作业讲解]计时器
重写后再丢上来 见DOM案例16
[作业讲解]无缝轮播图
重写后再丢上来 见DOM案例18
window对象
自身方法
- open
打开一个新窗口
open(“页面路径”, “打开目标”, “配置”)
- alert
- confirm
- prompt
对象属性
- document
document.write
在当前文档流中写入内容，如果当前文档流不存在，则新开一个文档流 - location：地址栏对象
href属性：得到目前地址
其他属性参考location.jpg
reload方法：刷新当前页面
- navigator
- history：历史记录
go方法
back方法
forword方法
- console
log方法：打印对象的valueOf的返回值
dir方法：打印对象结构
tiem方法和timeEnd方法：用于计时
[作业讲解]提示插件
插件的特点
- 通用性
- 易用性
- 尽量不要与其他功能冲突
- 通用性
- 易用性
- 尽量不要与其他功能冲突
- 补充 ==> 图片的base64格式
网上有在线转换工具
将图片上传后
得到base64码
并将它传入img的src属性中 即可
- 注册事件一般位于处于化完成之后
if (!window.myPlugin) {
window.myPlugin = {};
}
window.myPlugin.openConfirm = (function () {
var divModal, //朦层
divCenter, //中间的容器
options,
spanTitle, // 提示标题的span元素 ==> 第1行
spanClose, // 关闭图标的span元素 ==> 第1行
divContent, // 内容区域的div元素 ==> 第2行
btnConfirm, // 确认按钮的div元素 ==> 第3行
btnCancel, // 取消按钮的div元素 ==> 第3行
isRegEvent = false; // 是否注册过事件
/**
* 打开一个确认对话框
*/
function openConfirm(opts) {
if (typeof opts === "string") { // 若调用 myPlugin.openConfirm() 时传入的参数是一个字符串 那么默认这个字符串为提示内容
opts = {
content: opts
};
}
if (!opts) { // 若调用 myPlugin.openConfirm() 时没有传入参数 则默认传入的是一个空对象
opts = {}; //默认为一个空对象
}
options = opts;
initModal();
initCenterDiv();
regEvent();
}
// 初始化操作完成后 再注册相关事件
function regEvent() {
if (!isRegEvent) {
isRegEvent = true;
spanClose.onclick = function () { // 点击关闭图标的span元素时 隐藏蒙层
divModal.style.display = "none";
}
divModal.onclick = function (e) { // 点击蒙层元素时 隐藏蒙层
if (e.target === this) {
divModal.style.display = "none";
}
}
btnCancel.onclick = function () { // 点击取消按钮的div元素时 隐藏蒙层
if (options.oncancel) {
options.oncancel(); // 若绑定了回调函数 则执行回调函数
}
divModal.style.display = "none";
}
btnConfirm.onclick = function () { // 点击确认按钮的div元素时 隐藏蒙层
if (options.onconfirm) {
options.onconfirm(); // 若绑定了回调函数 则执行回调函数
}
divModal.style.display = "none";
}
}
}
/**
* 初始化朦层
*/
function initModal() {
if (!divModal) {
divModal = document.createElement("div");
divModal.style.position = "fixed";
divModal.style.background = "rgba(0,0,0,.2)";
divModal.style.width = divModal.style.height = "100%";
divModal.style.left = divModal.style.top = 0;
document.body.appendChild(divModal);
}
divModal.style.display = "block";
}
/**
* 初始化中间的div
*/
function initCenterDiv() {
if (!divCenter) {
divCenter = document.createElement("div");
divCenter.style.position = "absolute";
divCenter.style.width = "260px";
divCenter.style.height = "160px";
divCenter.style.background = "#fff";
divCenter.style.left = divCenter.style.right = divCenter.style.top = divCenter.style.bottom = 0;
divCenter.style.margin = "auto";
divCenter.style.fontSize = "14px";
initDivCenterContent();
divModal.appendChild(divCenter);
btnCancel = divCenter.querySelector("[data-myplugin-id=cancel]")
btnConfirm = divCenter.querySelector("[data-myplugin-id=confirm]")
spanTitle = divCenter.querySelector("[data-myplugin-id=title]");
spanClose = divCenter.querySelector("[data-myplugin-id=close]")
divContent = divCenter.querySelector("[data-myplugin-id=content]");
}
//设置配置的内容
spanTitle.innerText = options.title || "提示";
divContent.innerText = options.content || "";
btnConfirm.className = options.confirmClass || "";
btnConfirm.innerText = options.confirmText || "确定";
btnCancel.className = options.cancelClass || "";
btnCancel.innerText = options.cancelText || "取消";
}
/**
* 初始化div内部的东西
*/
function initDivCenterContent() {
//创建内部的标题div 第一行
var div = document.createElement("div");
div.style.height = "40px";
div.style.background = "#eee";
div.style.boxSizing = "border-box";
div.style.padding = "10px 20px 0";
div.innerHTML = `
<span style="float:left;" data-myplugin-id="title"></span>
<span data-myplugin-id="close" style="float:right; cursor:pointer">
<img style="width:18px;height:18px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACDklEQVRoQ+2Z/TEEQRDF30WADGSACMgAGZABkZABGSACJQMykAEyUE/dqLmpmZ2Z7rd7dsv8eXXd/X7TPR87vcLMx2rm+rFogF0ABwBetpylYwBvAD5zOnIZoPA7AGdrAxpeA7ifGOQCwA0A6uF4BHCZguQAHiLxsWYaTwVB8ZzEdBDiPP4xBSDtx8BMTwFREh9k7cVZSAFOADxXSmVMiJp4SjsC8Bo05kqINb+zBYgW8V/RmviRmANocURbZSbMMUvngNmhYadyxRo6yFyOG0HcMWonsTvAAIjEdw2A8SWBEhCZzxYANYRMfGkXKmVdEVjhY0NfawaCkUeAx7a4lHoBrOU0ivjeEopnoUcQ7XIXs3RWTQejJQO95dRyJJjEezKghDCLVwD0rIlcJlziVQBWCLd4JUAvhET8P0BU1K3barwOJFnwbKOKncgN4QWwzLzkAAtOPAAK8UGHORNWgFbxFPbnrhI94sNDmMWm5QrS/bjrEeKxlVynFQIUPkwfNMrASl9NJSQNuJ4+mc/aLiQLlCliie/FPmxJZqdpH3S+Oy3ycZcNjtDWKU2i+egfyEpL1vn0zwbH71hcg2P2LSamho2000yqxyibUkWVyukpbUCW2qy8hAUItnWuJuxQxh9Kt1G7i+IJttEvHjoHWE77cUOtcVtU/+0QwHtPo1stYFR/tavEqMEVzmcP8A0Z6ZQxBkTeYQAAAABJRU5ErkJggg==" />
</span>
`;
divCenter.appendChild(div);
//创建提示文本div 第二行
div = document.createElement("div");
div.dataset.mypluginId = "content";
div.style.height = "70px";
div.style.boxSizing = "border-box";
div.style.padding = "20px";
divCenter.appendChild(div);
//创建按钮div 第三行
div = document.createElement("div");
div.style.height = "50px";
div.style.boxSizing = "border-box";
div.style.padding = "10px 20px";
div.style.textAlign = "right";
div.innerHTML = `
<button data-myplugin-id="confirm"></button>
<button data-myplugin-id="cancel"></button>
`;
divCenter.appendChild(div);
}
return openConfirm;
}())
若有收获，就点个赞吧
0 人点赞
