莆田市荔城区建设局网站,西安企业管理咨询有限公司,公司注册费用大概多少钱,怎么做王者荣耀网站前言 本篇文章是JavaScript基础知识的BOM篇#xff0c;如果前面的《JavaScript基础知识-DOM篇》看完了#xff0c;现在就可以学习BOM了。 注意#xff1a; 所有的案例都在这里链接: 提取密码密码: yvxo#xff0c;文章中的每个案例后面都有对应的序号。 1. BOM 基本概念 B… 前言 本篇文章是JavaScript基础知识的BOM篇如果前面的《JavaScript基础知识-DOM篇》看完了现在就可以学习BOM了。 注意 所有的案例都在这里链接: 提取密码密码: yvxo文章中的每个案例后面都有对应的序号。 1. BOM 基本概念 BOM(Browser Object Model)浏览器对象模型提供了一套操作浏览器的工具。 BOM中包含的内容很多但是有很多东西是用不到的。在BOM中我们需要掌握定时器。 2. window 对象 window对象是一个全局对象也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性其实BOM中基本所有的属性和方法都是属性window的。所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法 window对象下的属性和方法调用的时候可以省略window 示例代码 [01-window对象.html] 普通函数调用的时候 var name 项羽;
var age 28;function Teacher() {this.name 虞姬;this.age 22;console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj Teacher(); // 打印的this 指的是全局对象window
console.log(name); // 虞姬
console.log(age); // 22
/*
为什么会是 虞姬 和 22 不是定义了一个全局变量name 项羽吗
因为 Teacher作为一个普通函数调用它里面的this指的就是全局对象
js 代码一步步往下执行一开始是定义了一个name项羽的全局变量
但是下面的this有将虞姬指向了全局对象所以最后打印的是虞姬 22
*/ 构造函数的时候 var name 项羽;
var age 28;function Teacher() {this.name 虞姬;this.age 22;console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj new Teacher(); // 打印的this 指的是构造函数对象 Teacher
console.log(name); // 项羽
console.log(age); // 28
/*
Teacher作为构造函数的时候它内部的this指向的是 对象Teacher
此时的全局变量name项羽 将不会再受this的影响所以打印的是 项羽 28
*/ 2.1 window.onload window.onload事件会在窗体加载完成后执行通常我们称之为入口函数。 window.onload function(){//里面的代码会在窗体加载完成后执行。//窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
} 注意 如果有图片加载那么代码一定要写到window.onload里面否则会出现图片没有加载完成获取到的宽度和高度不对的情况。浏览器会对页面的加载做优化在加载图片的时候图片的引入会延迟。一个页面中不能有两个onload函数写在下面的会覆盖掉上面的。示例代码 [02-window.onload对象(一)] 为什么下面的代码会报错呢 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlewindow.onload/title!-- script写在上面直接报错 --!-- 因为代码是一步步向下执行的在head里的script获取btn或者box的时候是获取不到的因为下面的页面结构还没加载到--scriptvar btn document.getElementById(btn);var box document.getElementById(box);btn.onclick function() {box.style.width 500px;box.style.height 500px;}/script
/headbodybutton idbtn按钮/buttondiv idbox stylewidth:200px;height:200px;background:pink;/div
/body/html 此时就可以用window.onload入口函数 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlewindow.onload/titlescript// 这里定义了一个入口函数就是说等页面所有文档树加载完才会执行这里面的代码window.onload function() {var btn document.getElementById(btn);var box document.getElementById(box);btn.onclick function() {box.style.width 500px;box.style.height 500px;}}/script
/headbodybutton idbtn按钮/buttondiv idbox stylewidth:200px;height:200px;background:pink;/div
/body/html 示例代码图片加载 [03-window.onload对象(二)] 为什么获取的宽度和高度都为0呢js代码不是写在最后面了吗 body!-- html 部分--img idimg src../image/levi.jpg alt!-- js 部分 --scriptvar img document.getElementById(img);console.log(img.width); // 0console.log(img.height); // 0/script
/body 效果图 这是因为浏览器会对页面的加载做优化在加载图片的时候图片的引入会延迟。这时候需要用window.onload headscript// 当文档加载完成的时候执行如果有图片等到图片也加载完成才会执行。window.onload function() {var img document.getElementById(img);console.log(img.width);console.log(img.height);}/script
/headbodyimg idimg src../image/levi.jpg alt
/body 效果图 2.2 window.open window.open() 打开一个窗口 语法window.open(url, [name], [features]); 参数1需要载入的url地址
参数2新窗口的名称_self:在当前窗口打开_blank:在新的窗口打开
参数3窗口的属性指定窗口的大小
返回值会返回刚刚创建的那个窗口用于关闭 示例代码 [04-window.open.html] !-- html 部分 --
button idbtn点击在新窗口跳转到百度/button
button idbtn2点击在本窗口跳转到百度/button!-- js 部分 --
scriptvar btn document.getElementById(btn);var btn2 document.getElementById(btn2);btn.onclick function() {// 在新窗口打开新窗口的大小为300 * 300var newWin window.open(http://www.baidu.com, _blank, width300,height300);}btn2.onclick function() {// 在当前窗口打开新窗口的大小根据当前窗口改变的设置的无效var newWin window.open(http://www.baidu.com, _self);}
/script 效果图 2.3 window.close window.close() 关闭一个窗口 在火狐浏览器下会失效解决办法 newWin.close()//newWin是刚刚创建的那个窗口
window.close(); //把当前窗口给关闭了 示例代码 [05-window.close.html] !-- html 部分 --
button idbtn点击在新窗口跳转到百度/button
button idbtn2点击在本窗口跳转到百度/button
button idbtn3点击关闭打开的新窗口/button
button idbtn4点击关闭本窗口/button!-- js 部分 --
scriptvar btn document.getElementById(btn);var btn2 document.getElementById(btn2);btn.onclick function() {// 在新窗口打开新窗口的大小为300 * 300var newWin window.open(http://www.baidu.com, _blank, width300,height300);btn3.onclick function() {// 关闭打开的新窗口newWin.close();}}btn2.onclick function() {// 在当前窗口打开新窗口的大小根据当前窗口改变的设置的无效var newWin2 window.open(http://www.baidu.com, _self);}btn4.onclick function() {// 关闭本窗口window.close();}
/script 效果图 3. 定时器 定时器里面不能用this因为在定时器里面this指向的是全局对象window。 3.1 延时定时器 延时定时器可以让代码延迟一段时间之后才执行。定时器不是我们调用我们只需要把函数的地址传过去时间到了window会自己调用。 1、设置延时定时器 语法setTimeOut(callback, time); 参数1回调函数时间到了就会执行。
参数2延时的时间 单位毫秒
返 回定时器的id用于清除 示例代码 [06-延时定时器.html] var timer setTimeOut(function(){//1秒后将执行的代码。console.log(哈哈);
}, 1000); 2.清除延时定时器 语法clearTimeOut(timerId); // 参数定时器id
clearTimeOut(timerId); 示例代码 !-- html 部分 --
button idbtn1开启/button
button idbtn2关闭/button!-- js 部分 --
scriptvar btn1 document.getElementById(btn1);var btn2 document.getElementById(btn2);// 定义一个全局变量var timeId; // 开启定时器btn1.onclick function() {//设置了一个定时器会返回一个定时器idtimeId setTimeout(function() {// 两秒后在页面显示 Boomdocument.write(h1 Boom! /h1);}, 2000);}// 清除定时器btn2.onclick function() {//清除定时器, 需要定时器idclearTimeout(timeId);}
/script 效果图两秒后执行代码两秒钟之内清除定时器就不会执行 3.2 间歇定时器 间歇定时器让定时器每隔一段时间就会执行一次并且会一直执行到清除定时器为止。 1、设置间歇定时器 语法var intervalID setInterval(func, delay); 参数1重复执行的函数
参数2每次延迟的毫秒数
返 回定时器的id用于清除 示例代码 var timer setInterval(function(){//重复执行的代码。
}, 1000); 2、清除间歇定时器 语法clearInterval(intervalID); 参数定时器id 示例代码 [07-间歇定时器.html] !-- html 部分 --
button idbtn1开启/button
button idbtn2关闭/button!-- js 部分 --
scriptvar btn1 document.getElementById(btn1);var btn2 document.getElementById(btn2);// 定义一个全局变量 存放定时器var timer;// 开启定时器btn1.onclick function() {//设置了一个定时器会返回一个定时器 idtimer setInterval(function() {// 每隔1秒 就会创建一个 h2 标签var tag document.createElement(h2);tag.innerHTML 我是间歇定时器;document.body.appendChild(tag);}, 1000);};// 清除定时器btn2.onclick function() {//清除定时器, 需要定时器idclearInterval(timer);document.body.innerHTML h1间歇定时器已清除/h1;};
/script 效果图 2.3 定时器综合练习 1、获取短信验证码案例 [08-定时器综合练习-获取短信验证码.html] !-- html 部分--
input typebutton value点击获取短信验证码 idbtn!-- js 部分 --
scriptvar btn document.getElementById(btn);var timer null;btn.onclick function() {// 倒计时的秒数var num 5;// 当按钮点击的时候 禁用buttonbtn.disabled true;timer setInterval(function() {// 每隔一秒修改num的值num--;// 修改btn的value值 这里不可以用this 因为定时器里的this指的是window对象btn.value num 秒后可再次发送;// 当num 0 秒的时候清除定时器if (num 0) {clearInterval(timer);btn.disabled false;btn.value 点击获取短信验证码;}}, 1000);}
/script 效果图 2、倒计时案例 [09-定时器综合练习-倒计时案例.html] !-- 样式部分 --
style.time {width: 160px;height: 40px;margin: 100px auto;line-height: 40px;font-size: 24px;font-weight: 700;}#h,#m,#s {float: left;display: block;width: 40px;height: 40px;text-align: center;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;}.split {width: 20px;float: left;text-align: center;}
/style!-- html 部分 --
div classtimespan idh00/spanspan classsplit:/spanspan idm00/spanspan classsplit:/spanspan ids00/span
/div!-- js 部分 --
scriptvar h document.getElementById(h);var m document.getElementById(m);var s document.getElementById(s);setTime();var timer setInterval(setTime, 1000);function setTime() {// 获取当前时间var newTime new Date(); // 此时测试的时间是 2017-12-11 15:24:00(根据本地时间一直在变)// 定义一个未来的时间var futureTime new Date(2017-12-11 16:30:31);// 获取时间差 单位是毫秒 首先我们需要转成秒 而且时间戳获取的时候 有很多小数 需要取整一下var time parseInt((futureTime - newTime) / 1000);// time现在已经是秒了 我们需要将它转换成小时// 1h 3600svar hours parseInt(time / 3600);// 将获取的小时添加到页面中 // 注意因为时钟是两位数这里的小时可能只是一个个位数所以需要拼接一个 0// 因为 分钟、秒都需要拼0所以我们可以封装一个函数h.innerHTML addZero(hours);// 获取分钟// 先将 time 转换成分钟 再去取余60var minutes parseInt(time / 60) % 60;// 将获取的分钟添加到页面中 m.innerHTML addZero(minutes);// 获取秒var seconds time % 60;s.innerHTML addZero(seconds);// 还要做个判断 当time这个时间差小于等于0的时候 清除定时器if (time 0) {// 如果不置0的话 还会继续减time 0;clearInterval(timer);}}// 拼接 0 函数function addZero(num) {// 如果传进来的参数小于10 就要给他拼 0return num 10 ? 0 num : num;}
/script 效果图 3、电子表案例 [10-定时器综合练习-电子表.html] !-- 样式部分 --
style#box {width: 300px;height: 50px;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;margin: 100px auto;font: bold 24px/50px 楷体;text-align: center;}
/style!-- html 部分 --
div idbox/div!-- js 部分 --
scriptvar box document.getElementById(box);// 封装一个获取当前时间的函数function getTime() {// 获取当前时间var date new Date();console.log(date);// 获取当前的年份var year date.getFullYear();// 获取当前时间的月份var month addZero(date.getMonth() 1);// 获取当前的天var day addZero(date.getDate());// 获取小时var hours addZero(date.getHours());// 获取分钟var minutes addZero(date.getMinutes());// 获取秒var seconds addZero(date.getSeconds());// 将时间格式设置为如下格式var str year - month - day hours : minutes : seconds;return str;}// 拼 0 函数function addZero(num) {return num 10 ? 0 num : num;}// 定时器会延迟一秒执行在外面定义一遍 会补偿这个一秒box.innerHTML getTime();setInterval(function() {box.innerHTML getTime();}, 1000);
/script 效果图 4、机械表案例 [11-定时器综合练习-机械表.html] !-- 样式部分 --
style.clock {width: 600px;height: 600px;margin: 100px auto;background: url(../image/机械表/clock.jpg) no-repeat;position: relative;}.clock div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../image/机械表/hour.png) no-repeat center center;}#m {background-image: url(../image/机械表/minute.png);}#s {background-image: url(../image/机械表/second.png);}
/style!-- html 部分 --
div classclockdiv idh/divdiv idm/divdiv ids/div
/div!-- js 部分 --
scriptvar h document.getElementById(h);var m document.getElementById(m);var s document.getElementById(s);function setTime() {// 获取当前时间var date new Date();// 设置秒针var seconds date.getSeconds() (date.getMilliseconds() / 1000);s.style.transform rotate( 6 * seconds deg);// 设置分针// 60分钟一圈360度 每分钟相当于 6度 这样只会一分分钟的走// 我们想要的效果是秒针旋转地同时 分针也在微弱的旋转 seconds/60得到一个小数 加上分钟 再去乘以角度var minutes date.getMinutes() seconds / 60;m.style.transform rotate( 6 * minutes deg);// 设置时针// 12个小时是一圈360度 每个小时相当于 30度var hours date.getHours() minutes / 60;h.style.transform rotate( 30 * hours deg);}// 页面一加载就执行一次setTime();// 让window每隔15ms就执行一次 1秒钟 分成 25份就已经有动画效果 分成60份很细腻setInterval(setTime, 15);
/script 效果图 4. Location对象 location对象也是window的一个属性location其实对应的就是浏览器中的地址栏。 4.1 常用的属性和方法 location.href:控制地址栏中的地址 location.href http://www.baidu.com; //让页面跳转到百度首页 location.reload()让页面重新加载 location.reload(true);//强制刷新相当于ctrlF5
location.reload(false);//刷新相当于F5 location的其他属性 console.log(window.location.hash); // 哈希值 其实就是锚点
console.log(window.location.host); // 服务器 服务器名端口号
console.log(window.location.hostname); // 服务器名
console.log(window.location.pathname); // 路径名
console.log(window.location.port); // 端口
console.log(window.location.protocol); // 协议
console.log(window.location.search); // 参数 示例代码定时跳转网址 [12-location对象-定时跳转.html] !-- html 部分 --
a href# idlink注册成功5秒后跳转/a!-- js 部分 --
scriptvar num 5;var link document.getElementById(link);var timer setInterval(function() {num--;link.innerHTML 注册成功 num 秒后跳转;// 如果倒计时等于0的时候自动跳转到网址if (num 0) {clearInterval(timer);location.href https://segmentfault.com/u/marsman_levi;}}, 1000);
/script 效果图 5. Navigator 对象 window.navigator的一些属性可以获取客户端的一些信息 navigator.userAgent返回浏览器版本 navigator.onLin返回网络状态 true / false 示例代码获取浏览器版本 [13-navigator对象.html] // 打印浏览器版本
console.log(navigator.userAgent);// 打印网络状态
console.log(navigator.onLine); 效果图 6. Screen 对象 window.screen的一些属性可以获取屏幕的宽高 1、获取屏幕的可占用宽高 返回访问者屏幕的宽度、高度以像素计减去界面特性比如窗口任务栏。 screen.availWidth获取屏幕的可用宽度screen.availHeight获取屏幕的可用高度 2、获取屏幕宽高 screen.width获取屏幕的宽度screen.height获取屏幕的高度 示例代码 [14-screen对象.html] document.write(当前屏幕可占用宽度 screen.availWidth br); // 1864
document.write(当前屏幕可占用高度 screen.availHeight br); // 1080
document.write(当前屏幕宽度 screen.width br); // 1920
document.write(当前屏幕高度 screen.height br); // 1080 效果图 7. History 对象 history对象表示页面的历史 1、后退 history.back() history.back() 方法加载历史列表中的前一个URL。这与在浏览器中点击后退按钮是相同的 history.back();
history.go(-1); 2、后退 history.forward() history forward() 方法加载历史列表中的下一个URL。这与在浏览器中点击前进按钮是相同的 history.forward();
history.go(1); 8. javascript 弹框 在javascript中可以创建3种弹框分别是警告框、确认框、提示框。 1、警告框 alert 警告框经常用于确保用户可以得到某些信息。当警告框出现后用户需要点击确定按钮才能继续进行操作。window.alert(呵呵呵);
// window.alert() 方法可以不带上window对象直接使用alert()方法。
alert(呵呵呵); 2、确认框 confirm 确认框通常用于验证是否接受用户操作。当确认卡弹出时用户可以点击 确认 或者 取消 来确定用户操作。当你点击 确认, 确认框返回 true 如果点击 取消, 确认框返回 false。var result confirm();
if (result true) {alert(你真的是猪!);
} else {alert(你不是猪);
} 3、提示框 prompt 提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后用户需要输入某个值然后点击确认或取消按钮才能继续操纵。如果用户点击确认那么返回值为输入的值。如果用户点击取消那么返回值为null。// 参数一提示内容 参数er可以省略输入框默认显示内容
var person prompt(请输入你的名字, Levi丶);
if (person ! null person ! ) {alert(你好 person);
} 4、弹框换行弹窗使用 反斜杠 n(\n) 来设置换行。 alert(大家好\n我是\nLevi丶); 9. javascript Cookie Cookie用于存储web页面的用户信息 1、什么是Cookie Cookie是一些数据, 存储于你电脑上的文本文件中。当web服务器向浏览器发送web页面时在连接关闭后服务端不会记录用户的信息。 Cookie的作用就是用于解决 如何记录客户端的用户信息: 当用户访问web页面时他的名字可以记录在cookie中。在用户下一次访问该页面时可以在cookie中读取用户访问记录。Cookie以名/值对形式存储如下所示: usernameLevi 当浏览器从服务器上请求web页面时属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。 2、使用 JavaScript 创建Cookie JavaScript可以使用document.cookie属性来创建 、读取、及删除cookie。 JavaScript中创建cookie如下所示 document.cookie username Levi; 你还可以为cookie添加一个过期时间以 UTC 或 GMT 时间。默认情况下cookie 在浏览器关闭时删除 document.cookieusername Levi; expires Tue Dec 12 2017 11:32:33 GMT0800; 你可以使用path参数告诉浏览器cookie的路径。默认情况下cookie属于当前页面 document.cookieusername Levi; expires Tue Dec 12 2017 11:32:33 GMT0800; path /; 3、使用 JavaScript 读取 Cookie 在 JavaScript 中, 可以使用以下代码来读取cookie var x document.cookie; document.cookie将以字符串的方式返回所有的cookie类型格式cookie1value; cookie2value; cookie3value; 4、使用 JavaScript 修改 Cookie 在 JavaScript 中修改cookie类似于创建cookie如下所示 document.cookieusername LXH; expires Tue Dec 12 2017 11:32:33 GMT0800; path /; 旧的cookie将被覆盖。 5、使用 JavaScript 删除 Cookie 删除cookie非常简单。您只需要设置expires参数为以前的时间即可如下所示 document.cookieusername Levi; expires Thu, 01 Jan 1970 00:00:00 GMT;; 注意当您删除时不必指定 cookie 的值。 6、Cookie 字符串 document.cookie属性看起来像一个普通的文本字符串其实它不是。 即使您在document.cookie中写入一个完整的cookie字符串, 当您重新读取该cookie信息时cookie 信息是以名/值对的形式展示的。 如果您设置了新的cookie旧的cookie不会被覆盖。 新cookie将添加到document.cookie 中所以如果您重新读取document.cookie。 上一篇JavaScript 基础知识 - DOM篇(二)下一篇JavaScript 进阶知识 - 特效篇(一)
