【前端】JavaScript入门及实战121-125 - IT评测·应用市场-qidao123.com

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
当鼠标滚轮向下滚动时，box1变长
当滚轮向上滚动时，box1变短
*/
var box1 = document.getElementById("box1");
// 获取鼠标滚轮滚动事件
/*
onmousewheel是鼠标滚轮滚动的事件，会在滚轮滚动时触发
但是火狐不支持该属性
在火狐中需要使用DOMMouseScroll来绑定滚动事件，
注意该事件需要通过addEventListener()函数来绑定
*/
box1.onmousewheel = function(event){
event = event || window.event;
// 判断鼠标滚轮滚动的方向
// event.wheelDelta可以获取鼠标滚轮滚动的方向
// 向上滚 120 向下滚 -120
// wheelDelta这个值我们不看大小，只看正负
//alert(event.wheelDelta);
// wheelDelta这个属性火狐中不支持
// 在火狐中使用event.detail来获取滚动的方向
// 向上滚 -3 向下滚 3
//alert(event.detail);
// 判断鼠标滚轮滚动的方向
if(event.wheelDelta > 0 || event.detail < 0){
// 向上滚，box1变短
box1.style.height = box1.clientHeight - 10 + "px";
}else{
// 向下滚，box1变长
box1.style.height = box1.clientHeight + 10 + "px";
}
/*
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
需要使用event来取消默认行为event.preventDefault();
但是IE8不支持event.preventDefault();如果直接调用会报错
*/
event.preventDefault && event.preventDefault();
/*
当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*/
return false;
};
/*bind(box1, "DOMMouseScroll", function(){
});*/
bind(box1, "DOMMouseScroll", box1.onmousewheel);
};
function bind(obj, eventStr, callback){
if(obj.addEventListener){
// 大部分浏览器兼容方式
obj.addEventListener(eventStr, callback, false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// IE8及以下
//obj.attachEvent("on" + eventStr, callback);
obj.attachEvent("on" + eventStr, function(){
// 在匿名函数调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

复制代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
键盘事件：
onkeydown：按键被按下
对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发，
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，
这种设计是为了防止误操作的发生。
onkeyup：按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
*/
document.onkeydown = function(event){
event = event || window.event;
/*
可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
除了keyCode，事件对象中还提供了几个属性
altKey、ctrlKey、shiftKey
这个三个用来判断alt ctrl 和 shift是否被按下，
如果按下则返回true，否则返回false
*/
//console.log(event.keyCode); // ctrl：17
// 判断一个y是否被按下
// 判断y和ctrl是否同时被按下
if(event.keyCode === 89 && event.ctrlKey){
console.log("ctrl和y都被按下了");
}
};
/*document.onkeyup = function(){
console.log("按键松开了");
};*/
// 获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
event = event || window.event;
// console.log(event.keyCode);
// 数字编码 48（0） - 57（9）
// 使文本框中不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57){
// 在文本框中输入内容，属于onkeydown的默认行为
// 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
return false;
}
};
};
</script>
</head>
<body>
<input type="text" />
</body>
</html>

复制代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
// 使div可以根据不同的方向键向不同的方向移动
/*
按左键，div向左移
按右键，div向右移
。。。
*/
window.onload = function(){
// 为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
// 定义一个变量，来表示移动的速度
var speed = 10;
// 当用户按了ctrl以后，速度加快
if(event.ctrlKey){
speed = 500;
}
/*
37 左
38 上
39 右
40 下
*/
switch(event.keyCode){
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

复制代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
/*
BOM
浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象
Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，
而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用
*/
//console.log(navigator);
//console.log(location);
//console.log(history);
/*
Navigator
代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息，
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
不同的浏览器会有不同的userAgent
火狐的userAgent
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Chrome的userAgent
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE11
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
*/
//alert(navigator.appName);
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浏览器");
}else if("ActiveXObject" in window){
alert("你是IE11");
}
/*
如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
比如：ActiveXObject
*/
/*if("ActiveXObject" in window){
alert("你是IE");
}else{
alert("你不是IE");
}*/
/*alert("ActiveXObject" in window);*/
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

复制代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
/*
History：对象可以用来操作浏览器向前或向后翻页
*/
window.onload = function(){
// 获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
length：属性，可以获取到当成访问的链接数量
*/
alert(history.length);
/*
back()：可以用来回退到上一个页面，作用和浏览器的回退按钮一样
*/
history.back();
/*
forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样
*/
history.forward();
/*
go()：可以用来跳转到指定的页面
它需要一个整数作为参数
1:表示向前跳转一个页面相当于forward()
2:表示向前跳转两个页面
-1:表示向后跳转一个页面
-2:表示向后跳转两个页面
*/
history.go(-2);
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<h1>History</h1>
<a href="01.BOM.html">去BOM</a> <div id="box1"></div>
</body>
</html>

复制代码