JavaScript
一、键盘事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ // 键盘事件 // 1.onkeydown 键盘被按下 // 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发 // 2.onkeyup 键盘被松开 // 一般都会绑定给一些可以获取到焦点的对象或者是document document.onkeydown = function(event){ event = event || window.event; // 可以通过keyCode来获取按键的编码 // 通过它可以判断那个按键被按下 console.log(event.keyCode); // 除了keyCode 事件对象中还提供了几个属性 // altCode // ctrlCode // shiftCode // 这三个属性用来判断alt、ctrl和shift是否被按下,按下返回true,否则返回false }; // document.onkeyup = function(){ // console.log("松开"); // }; var input = document.getElementByTagName("input")[0]; input.onkeydown = function(){ console.log("按下了"); // 数字48-57 // 使用文本框不能输入数字 if(event.keyCode >= 48 && event.keyCode <= 57){ // 在文本框中输入内容,属于是onkeydown的默认行为 // 如果要取消默认行为,则输入内容不会出现在文本框中 return false; } }; }; </script> </head> <body> <input type="text" /> </body> </html>
二、鼠标滚轮事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{ width: 100px; height: 100px; background-color: cyan; } </style> <script type="text/javascript"> window.onload = function(){ //当鼠标滚轮向下滚动时,box1变长 // 滚轮向上滚动时,box1变短 // 获取id为box1的div var box1 = document.getElementById("box1"); // 为box1绑定一个鼠标滚轮滚动事件 // onmousewheel鼠标滚轮滚动事件,会在滚轮滚动时触发 // 但是火狐不支持该属性 box1.onmousewheel = function(){ alert("鬼了"); }; // 在火狐中需要使用DOMMouseScroll,来绑定滚动事件 // 注意该事件需要通过addEventListener()函数来绑定 box1.onmousedown = function(event){ event = event || window.event; // event.wheelDelat可以获取鼠标滚轮滚动方向(火狐中不支持) // 向上滚120,向下滚-120,这个值我们只看正负,不看大小 alert(event.wheelDelat); // 在火狐中使用event.detail来获取滚动方向 // 向上滚-3,向下滚3 alert(event.detail); //判断鼠标滚轮滚动方向 if(event.wheelDelat > 0 || event.detail < 0){ // 向上滚box1变短 box1.style.height = box1.clientHeight - 10 + "px"; }else{ // 向下滚box1变长 box1.style.height = box1.clientHeight + 10 + "px"; } // 当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动 // 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为 return false; }; }; </script> </head> <body> <div id="box1"></div> </body> </html>
三、BOM
浏览器对象模型,可以使我们通过js来操作浏览器
在BOM中为我们提供了一组对象,用来完成浏览器的操作
BOM对象 ：
1.Window 代表的是整个浏览器的窗口,同时也是网页中的全局对象
2.Navigator 代表当前浏览器的信息,通过该对象可以识别不同的浏览器
3.Location 代表当前浏览器的地址栏信息,可以获取地址栏信息,或者操作浏览器跳转页面
4.History 代表浏览器的历史记录,可以操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
而且该操作只在当次访问生效
5.Screen 代表用户屏幕的信息,可以获取到用户的显示器的相关信息
这些BOM对象在浏览器中都是作为window对象属性保存的
可以通过window对象来使用,也可以直接使用
1.Navigator
<script type="text/javascript"> // Navigator: // 由于历史原因userAgent对象中的大部分属性都已经不能帮助我们识别浏览器了 // 一般我们会使用userAgent来判断浏览器的信息 // userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容 // 不同的浏览器会有不同的userAgent console.log(navigator.userAgent); //通过正则表达式来判断浏览器 var ua = navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("火狐浏览器"); }else if(/chrome/i.test(ua)){ alert("Chrome浏览器"); }else if(/msie/i.test(ua)){ alert("IE浏览器"); } // 在IE11中已经将微软和IE的相关的标识都已经去除 // 所以我们基本不能通过userAgent来识别一个浏览器是否是IE了 // 可以通过浏览器中特有的对象来判断浏览器的信息 // 比如:ActiveXObject if("ActiveXObject" in window){ alert("IE浏览器"); } </script>
2.History
length 属性:可以获取到当前访问的数量
alert(history.length);
back() 可以退回到上一个页面
history.back();
forward() 可以跳转到下一个页面
history.forward();
go() 可以用来跳转到指定页面
它需要一个整数作为参数:1 表示向前跳转一个页面,相当于forward(); -1 表示向后跳转一个页面
history.go(1);
3.Location
assign()
用来跳转到其他页面,作用和直接修改location一样
location = "http://www.baidu.com";
location.assign("http://www.baidu.com");
reload()
用于重新加载当前页面,作用和刷新按钮一样
如果在方法中传递一个true作为参数,则会强制清空缓存刷新页面
location.reload(true);
replase()
可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
location.replase("http://www.baidu.com");
四、定时器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ // 获取count var count = document.getElementById("count"); // 是count中的内容自动切换 // setInterval() 定时调用 // 可以将一个函数每隔一段时间执行一次 // 参数: // 1.回调函数,该函数会每隔一段时间被调用一次 // 2.每次调用间隔的时间,单位是毫秒 // 返回值:返回一个number类型的数据 // 这个数字用来作为定时器的唯一标识 var num = 1; var timer = setInterval(function(){ count.innerHTML = num++; if(num == 61){ // clearInterval()可以用来关闭一个定时器 // 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器 // 关闭定时器 clearInterval(timer); } },1000); // console.log(timer); }; </script> </head> <body> <h1 id="count">1</h1> </body> </html>
五、自动切换图片练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ // 使图片可以自动切换 // 获取img标签 var img1 = document.getElementById("img1"); // 创建一个数组,来存放图片路径 var imgArr = ["images/img1.jpg","images/img2.jpg","images/img3.jpg","images/img4.jpg","images/img5.jpg"]; // 创建一个变量,来保存当前正在显示的图片的索引 var index = 0; // 开启一个定时器,来自动切换图片 setInterval(function(){ // 索引自增 index ++ ; // 判断索引是否超过最大索引 if(index >= imgArr.length){ //则将index设置为0 index = 0; } // 还可以用以下方式书写 // index %= imgArr.length; // 修改img1的src属性 img1.src = imgArr[index]; },1000); }; </script> </head> <body> <img id="img1" src="images/img1.jpg"/> </body> </html>
