目录
7.定时器小demo（利用定时调用功能，使div能够向左跑和向右跑）
1.Bom相关简介
Dom是我们通过js操作界面的样式，BOM可以使我们通过JS来操作浏览器
* - BOM对象
* Window
* - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
* Navigator
* - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
* Location
* - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
* History
* - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
* 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
* 而且该操作只在当次访问时有效
* Screen
* - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
*
*
* 这些BOM对象在浏览器中都是作为window对象的属性保存的，
* 可以通过window对象来使用，也可以直接使用
*
2.Navigator
* 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了，因此通过IE中特有的一些属性和方法来区别IE
*/
通过正则表达式来区别不同的浏览器
var ua = navigator.userAgent;
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，枪毙了你~~~");
}
3.History
<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>4.Location
<script type="text/javascript">
/*
* Location
* - 该对象中封装了浏览器的地址栏的信息
*/
window.onload = function(){
//获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function(){
//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
//alert(location);
/*
* 如果直接将location属性修改为一个完整的路径，或相对路径
* 则我们页面会自动跳转到该路径，并且会生成相应的历史记录
*/
//location = "http://www.baidu.com";
//location = "01.BOM.html";
/*
* assign()
* - 用来跳转到其他的页面，作用和直接修改location一样
*/
//location.assign("http://www.baidu.com");
/*
* reload()
* - 用于重新加载当前页面，作用和刷新按钮一样
* - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
* 例如清空表单里写的内容
*/
//location.reload(true);
/*
* replace()
* - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
* 不会生成历史记录，不能使用回退按钮回退
*/
location.replace("01.BOM.html");
};
};
</script>5.定时调用
/*
* JS的程序的执行速度是非常非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
*/
/*
* setInterval()
* - 定时调用
* - 可以将一个函数，每隔一段时间执行一次
* - 参数：
* 1.回调函数，该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间，单位是毫秒
*
* - 返回值：
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
*/
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
6.延时调用
/*
* 延时调用，
* 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
*
* 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
*
* 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
*/
var timer = setTimeout(function(){
console.log(num++);
},3000);
//使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);7.定时器小demo（利用定时调用功能，使div能够向左跑和向右跑）
抽取出js工具类
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}测试
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
move(box1 ,"left", 800 , 20);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
move(box1 ,"left", 0 , 10);
};
//获取btn03
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
move(box2 , "left",800 , 10);
};
//测试按钮
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//move(box2 ,"width", 800 , 10);
//move(box2 ,"top", 800 , 10);
//move(box2 ,"height", 800 , 10);
move(box2 , "width" , 800 , 10 , function(){
move(box2 , "height" , 400 , 10 , function(){
move(box2 , "top" , 0 , 10 , function(){
move(box2 , "width" , 100 , 10 , function(){
});
});
});
});
};
};8.类的操作
//修改box的样式
/*
* 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
* 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
*/
/*box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "yellow";*/
/*
* 我希望一行代码，可以同时修改多个样式
*/
//修改box的class属性
/*
* 我们可以通过修改元素的class属性来间接的修改样式
* 这样一来，我们只需要修改一次，即可同时修改多个样式，
* 浏览器只需要重新渲染页面一次，性能比较好，
* 并且这种方式，可以使表现和行为进一步的分离
*/
抽取一个js工具类
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值 .cn{}
*
*/
function addClass(obj , cn){
//检查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*
*/
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj , cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg , "");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有，则删除
removeClass(obj , cn);
}else{
//没有，则添加
addClass(obj , cn);
}
}9.JSON
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
* 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON分类：
* 1.对象 {}
* 2.数组 []
JSON转js
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';
/*
* 将JSON字符串转换为JS中的对象
* 在JS中，为我们提供了一个工具类，就叫JSON
* 这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
*/
var json = '{"name":"孙悟空","age":18,"gender":"男"}';
/*
* json --> js对象
* JSON.parse()
* - 可以将以JSON字符串转换为js对象
* - 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
*/
var o = JSON.parse(json);
var o2 = JSON.parse(arr);js转JSON
var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
/*
* JS对象 ---> JSON
* JSON.stringify()
* - 可以将一个JS对象转换为JSON字符串
* - 需要一个js对象作为参数，会返回一个JSON字符串
*/
var str = JSON.stringify(obj3);
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
