本文共 2816 字，大约阅读时间需要 9 分钟。

 

bom，browser object model 浏览器对象模型，用于与浏览器交互。

window.onload就是bom中的事件。

 

打开新标签页、窗口

// 在新标签页中打开指定页面，第二个参数指定打开方式，缺省时默认在新标签页中打开，url必需指定协议window.open("http://www.baidu.com","_blank"); // 如果使用第三个参数指定窗口尺寸，会议新窗口的方式打开window.open("http://www.baidu.com","","width=200,height=200"); // 可以向新打开的标签页|窗口输出内容var window1=window.open("http://www.baidu.com","_blank"); window1.document.write("
hello
");// 关闭已打开的标签页|窗口window1.close();

 

在当前标签页中打开指定链接

console.log(location.pathname);  //请求的urlconsole.log(location.search);  //url中的查询字符串，?xxx=xxx&xxx=xxx...//以下三种方式均可window.location="http://www.baidu.com";location.href="http://www.baidu.com";//location="http://www.baidu.com";  //可以这样写，但不推荐//url可以是controller中映射的地址。如果是前后端分离的项目，url必须连域名写全window.location="/download";   //如果是下载、获取验证码这种没有页面的，会执行操作，但不会打开页面。常用于实现文件下载

 

window.history

history表示浏览器的历史记录

history.back();  //相当于点击浏览器的后退按钮history.forward();  //相当于点击浏览器的前进按钮

window是一个对象，location、history是window的子对象，使用location、history时可以省略window。

 

window.localStorage 本地存储

本地存储：把数据序列化后存储在浏览器上，要使用时从本地存储中读取

var name="chy"var arr = [45, 4, 9, 16, 25];var user={
   name:"chy",age:20};//将数据放到本地存储中时，要先用JSON.stringify()序列化数据window.localStorage.setItem("name",JSON.stringify(name));  window.localStorage.setItem('arr',JSON.stringify(arr));  window.localStorage.setItem('user',JSON.stringify(user));  //从本地存储中读取数据var name1=JSON.parse(window.localStorage.getItem("name")); var arr1=JSON.parse(window.localStorage.getItem("arr")); var user1=JSON.parse(window.localStorage.getItem("user"));

浏览器中调试时，本地存储中的数据可在 Application -> Local Storage 中查看

 

对话框

// 弹出框alert("msg");// 选择框，有2个按钮：确定、取消，返回boolean，点击确定返回true，点击取消返回falsevar result1=confirm("是否要删除该项?");console.log(result1);// 输入框，第二个指定输出框的默认值，缺省时默认为空串// 有2个按钮：确定、取消，点击确定返回输出框的值，点击取消返回nullvar result2=prompt("请输入你的姓名","");console.log(result2);

 

定时器

写定时任务、延时执行、动画时经常要用到定时器，定时器有2种

// 延时型定时器,只执⾏⼀次var timer1=setTimeout(function(){
     console.log("msg1");},5000);  //5000ms后执行// 清除延时型定时器，如果该定时器尚未执行，会取消掉clearTimeout(timer1);// 间隔型定时器，每隔指定时间就执行1次var timer2=setInterval(function(){
     console.log("msg2");},5000);  //每隔5000ms就执行1次// 清除间隔型定时器。调用此函数会终止定时器，后续不再执行该定时器clearInterval(timer2);

间隔型定时器常用与有规律地执行任务，延时型定时器常用于写动画、元素的延时隐藏。

 

延时型定时器实例  延时隐藏元素

以小米商城为例 鼠标移到菜单栏的某项上，在下方或右方显示对应的板块； 鼠标移到板块上，该板块也要处于显示状态； 鼠标移出菜单项，隐藏对应的板块。

用户把鼠标从菜单项移到板块上时，两者之间如果设置了margin，鼠标一移出菜单项，往往还没移到板块上，板块就被隐藏了。

在菜单项的onmouseout事件监听中，应该使用延时型定时器，延时隐藏板块，确保延时时间够用户把鼠标从菜单项移到板块上。

另一种更简单的方式是不使用margin，改用padding做间距，菜单项、对应的板块这2个元素是挨着的（element=content+padding+border），但有一个问题：background=content+padding，如果设置了背景颜色|图片且padding有点大的时候，可能导致背景范围偏大。

 

间隔型定时器实例 走马灯

走马灯效果常见于火车站、银行、移动公司等的屏幕上，文字在水平方向上移动。不局限于文字，可以是其它元素，比如多个图片的展示，轮播图是直接切换图片，走马灯是逐渐向左移动。

可以用css3的过渡或动画实现，也可以用js的间隔型定时器实现。

使用定时器实现的思路

• position 不能是static，因为要使用left设置元素显示位置
• 使用间隔型定时器，每隔xx时间就将left的值减去xxx，形成向左移动的效果
• 溢出隐藏
• 判断left的值是否达到xxx（向左移动元素是否已到末尾），如果已达到，重置left为原值，从头再次开始

转载地址：http://sgqlb.baihongyu.com/