文章目录
目录
1.BOM的基本概念（对浏览器的操作）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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>
</body>
</html>
2.History和Location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* History
* - 对象可以用来操作浏览器向前或向后翻页
*
*
* length
* - 属性，可以获取到当前访问的链接数量(关闭页面就没有了)
*
*/
//alert(history.length);
window.onload = function(){
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* back()
* - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
*/
//history.back();
/*
* forward()()
* - 可以用来跳转到上一个页面，作用和浏览器的前进按钮一样
*/
//history.forward();
/*
* go()
* - 可以用来跳转到制定的页面
* - 它需要一个整数作为参数
* 1：表示向前跳转一个页面 相当于forward()
* 2：表示向前跳转2个页面
* -1：表示向后跳转1个页面
* -2：表示向后跳转2个页面
*/
//history.go(1);
}
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<a href="test01.html">test1</a>
<!--<h1>History</h1>-->
</body>
</html>
location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Location
* - 该对象封装了浏览器的地址栏信息
*
*
*
*/
window.onload = function(){
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//如果直接打印location，则可以获取到地址栏的信息(当前页面完整路径)
//alert(location);
/*
* 如果直接将location属性修改为一个完整的路劲，或相对路径
* 则我们页面会自动跳转到该路径，并且会生成一个历史记录
* - 如果路径不存在：则显示404
*
*/
//获取到——也可以修改
//location="https://home.firefoxchina.cn/?from=extra_start";
//location = "01.BOM自己.html";
//如果路径不存在：则显示空页面
//location = "hhh";
/*
* assign()
* - 用来跳转到其他页面，作用和直接修改location一样
*/
//location.assign("01.BOM自己.html");
/*
* reload()
* - 用于重新加载当前页面，作用和刷新按钮一样
* - 如果方法中传递一个true ，作为参数，则会强制清空缓存刷新页面
* - 和ctrl+F5一样
*/
//location.reload();文本框有值
//location.reload(true); 文本框无值
/*
* replace()
* - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
* 不会生成历史记录，不能使用回退按钮回退
*
*/
//location.replace("01.BOM自己.html");
}
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
3.方向键控制盒子的移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
/*
* 之前在没有加定时器之前。是方向键控制方向和速度
* 加了定时器之后，
*
*/
window.onload = function(){
//业务逻辑：
/* 1. 按下左键，box2向左走
* 2. 获取左键
* 3. 获取键盘事件按下onkeydown
*
*
* 上下左右38 40 37 39
*
*/
//定义一个变量来控制移动的速度
var speed = 10;
//控制方向
var bir;
var box1 = document.getElementById("box1");
document.onkeydown = function(event){
//兼容浏览器
event = event || window.event;
//当按下ctrl的时候，开始变速
if(event.ctrlKey){
speed = 50;
}else{
//不按ctrl的时候
speed = 10;
}
//使bir获取到方向上的值
bir = event.keyCode;
};
//使用定时器来控制速度
setInterval(function(){
/*
* 37左
* 38上
* 39右
* 40下
*/
//offsetLeft 这个是它原来的值
switch(bir){
case 37:
//alert("向左");
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;
}
},30);
//当按键松开的时候，停止移动
document.onkeyup = function(){
bir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
4.定时器简介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*
*
*/
window.onload = function(){
//获取count中的内容，自动切换
/*
* 在JS中的程序的执行速度是非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
*
*
*
*/
/*var count = document.getElementById("count");
for (var i=0; i< 1000 ; i++) {
count.innerHTML = i;
alert("hello");
}*/
/*
* setInterval()
* - 定时调用
* - 可以将一个函数，每隔一段时间执行一次
* - 参数：
* 1. 回调函数，该函数会每隔一段时间被调用一次
* 2. 每次调用间隔的时间，单位是毫秒
*
* - 返回值:
* - setInterval()方法会返回一个值，Number类型的值
* 这个值就是这个定时器的唯一标识
*
*
*/
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
//限定关闭时间
if(num==11){
clearInterval(timer);
}
},1000);
//console.log(timer);
//clearInterval()可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
//clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
5.轮播图的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1{
display: block;
width: 1262px;
height: 450px;
margin-left: 125px;
margin-top: 100px;
}
</style>
<script type="text/javascript">
/*
* 业务逻辑：
* 1.改变图片就是改变src路径代码
* 2.获取到img
* 3.获取到src
* 4.数组存放图片路径
* 5.遍历图片
* 6.加上定时器
*/
window.onload = function(){
var img1 = document.getElementById("img1");
var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
//索引自增方法
//创建一个变量，来保存当前图片的索引
var index = 0;
//创建一个变量，让暂停按钮可以访问
var timer;
//开始单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick =function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器
* 而为什么暂停不了，那是因为每次接受的都是一个最新的值timer，
* 之前的值接收不到就会一直在转动
* 所以点击多次就会开启多个定时器，这就会导致图片的切换速度过快
* 并且我们只能关闭最后一次开启的定时器
*
*/
//所以得在开启定时器之前，关闭上一个定时器
clearInterval(timer);
//开启一个定时器，来自动切换图片
timer = setInterval(function(){
//使索引自增
index++;
//方法一：
//判断索引是否超过最大索引
/*if (index == imgs.length) {
//index回到起始位置；为0
index=0;
}*/
//方法二：
//0%5=0,1%5=1,2%5=2,3%5=3,4%5=4,5%5=0
index = index % imgs.length;
//方法三(简写)： 在火狐不适用？？？？？为什么
//index % = imgs.length;
//修改img1的src属性
img1.src = imgs[index];
},1000);
//暂停当前页面
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器，
* 点击多次就会开启多个定时器，这就导致图片切换速度过快
* 并且我们只能关闭最后一次开启的定时器
*
* 那么怎么解决？？？？
* 在开启定时器之前先把上一次的定时器关闭
*/
//点击按钮的时候暂停页面，即关闭定时器
clearInterval(timer);
};
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg"/>
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">暂停</button>
</body>
</html>
6.延时调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var num = 1;
//开启定时器
/*setInterval(function(){
console.log(num++);
},3000);*/
/*
* 延时调用
* 延时调用一个函数不马上执行，而是延迟一段时间执行,而且只会执行一次
*
* 延时调用和定时调用的区别，定时调用会执行多次，而延时调用会执行一次
* 自动弹出广告 调用的就是这个方法
*
* 延时调用和定时调用实际上是可以相互替代的，在开发中可以根据自己的需要去选择
*/
var timer = setTimeout(function(){
console.log(num++);
},3000);
//使用clearTimeout()关闭延时调用
clearTimeout(timer);
};
</script>
</head>
<body>
</body>
</html>
7.定时器的应用1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box01{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
/*ie默认left=auto ，所以我们固定一个值给他就行*/
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
var box01 = document.getElementById("box01");
var timer;
btn01.onclick = function(){
//每一次开启之前都要关闭之前的，防止重复使用，速度变快
clearInterval(timer);
//开启定时器
timer = setInterval(function(){
//获取box01原来的left值
//var oldValue = box01.offsetLeft;
//灵活一些，不止使用left，还有top，width，height等
//但是获取的值的是0px，需要使用parseInt()取整：只取到值的部分
var oldValue = parseInt(getStyle(box01,"left"));
//在旧值的基础上增加
//var newValue = oldValue + 10;
var newValue = oldValue + 13;
//小技巧：让它始终等于800
if(newValue > 800){
newValue = 800;
}
//将新值设置给box1
box01.style.left = newValue + "px";
//当到八百的时候停止，但是当10改变的时候，不一定停止了，所以，还得加一个条件
if(newValue == 800){
clearInterval(timer);
}
},30);
};
};
function getStyle(obj , name){
//正常浏览器的方式
//getComputedStyle(obj,null).name;写固定了
//return getComputedStyle(obj,null)[name];//name传入的值
//IE8的方式
//return obj.currentStyle[name];
//以后处理浏览器的兼容性问题的思路
/*
* 说明：当if (getComputedStyle)的时候getComputedStyle浏览器默认是一个变量
* 所以当找变量的时候，浏览器是先在内部函数找，然后在全局函数找,都找不到的情况就会报错
* 当是变量etComputedStyle的时候，就去作用域中寻找，没找到就会报错；
* 当是全局属性的时候window.getComputedStyle ，没找到就会报一个undefined
* 所以确保window.getComputedStyle为真
*
*/
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
//当ie11以上的时候，我们本是想优先使用getComputedStyle
//但是这一种方式肯定会先使用currentStyle，所以有点小瑕疵
/*if (obj.currentStyle) {
//IE8的方式
return obj.currentStyle[name];
}else{
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}*/
}
</script>
</head>
<body>
<button id="btn01">点一下我就向右移动</button>
<br /><br />
<div id="box01"></div>
<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
</body>
</html>
8.定时器的应用2向右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box01{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
/*ie默认left=auto ，所以我们固定一个值给他就行*/
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box01 = document.getElementById("box01");
btn01.onclick = function(){
move(box01,800,10);
};
btn02.onclick = function(){
move(box01,0,10);
};
};
var timer;//注意这里
function getStyle(obj , name){
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
//封装成一个函数
/*
* 参数：
* obj 对象
* target 到达目标
* speed 速度
*/
function move(obj , target , speed){
//每一次开启之前都要关闭之前的，防止重复使用，速度变快
clearInterval(timer);
/*
* 不应该让用户去判断，而是，让程序员判断
*/
var crruent = parseInt(getStyle(obj,"left"));
if (crruent > target) {
//把负值变为正值
//把正值变负值
speed = -speed;
}
//开启定时器
timer = setInterval(function(){
//获取box01原来的left值
//var oldValue = box01.offsetLeft;
//灵活一些，不止使用left，还有top，width，height等
//但是获取的值的是0px，需要使用parseInt()取整：只取到值的部分
var oldValue = parseInt(getStyle(obj,"left"));
//在旧值的基础上增加
var newValue = oldValue + speed;
//小技巧：让它始终等于800
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){
newValue = target;
}
//将新值设置给box1
obj.style.left = newValue + "px";
//当到八百的时候停止，但是当10改变的时候，不一定停止了，所以，还得加一个条件
if(newValue == target){
clearInterval(timer);
}
},30);
}
</script>
</head>
<body>
<button id="btn01">点一下我就向右移动</button>
<button id="btn02">点一下我就向左移动</button>
<br /><br />
<div id="box01"></div>
<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
</body>
</html>
9.定时器的练习答案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
move(box1 , 800 , 10);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
move(box1 , 0 , 10);
};
};
//定义一个变量，用来保存定时器的标识
var timer;
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
*/
function move(obj , target ,speed){
//关闭上一个定时器
clearInterval(timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj,"left"));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target){
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
timer = setInterval(function(){
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj,"left"));
//在旧值的基础上增加
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.left = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target){
//达到目标，关闭定时器
clearInterval(timer);
}
},30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>
10.定时器的应用1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box01{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
/*ie默认left=auto ，所以我们固定一个值给他就行*/
left: 0;
}
#box02{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
/*ie默认left=auto ，所以我们固定一个值给他就行*/
left: 0;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box01 = document.getElementById("box01");
//黄盒子
var box02 = document.getElementById("box02");
var btn03 = document.getElementById("btn03");
//实现更多功能
var btn04 = document.getElementById("btn04");
var btn05 = document.getElementById("btn05");
var btn06 = document.getElementById("btn06");
var btn07 = document.getElementById("btn07");
var btn08 = document.getElementById("btn08");
btn01.onclick = function(){
move(box01,"left",800,10);
};
btn02.onclick = function(){
move(box01,"left",0,10);
};
btn03.onclick = function(){
move(box02,"left",800,10);
};
//实现更多的功能: 长度 top
btn04.onclick = function(){
move(box02,"left",0,10);
};
btn05.onclick = function(){
move(box02,"top",0,10);
};
btn06.onclick = function(){
move(box02,"top",500,10);
};
/*yellow长度变长*/
btn07.onclick = function(){
move(box02,"width",800,10);
};
btn08.onclick = function(){
move(box02,"height",800,10);
};
var btn09 = document.getElementById("btn09");
btn09.onclick = function(){
move(box02,"width",800,10 , function(){
move(box02,"height",400,10,function(){
});
});
};
};
</script>
<script type="text/javascript" src="js/tools.js"></script>
</head>
<body>
<button id="btn01">点一下我就向右移动</button>
<button id="btn02">点一下我就向左移动</button>
<button id="btn03">点一下我yellow就向右移动</button>
<button id="btn04">点一下我yellow就向左移动</button>
<button id="btn05">点一下我yellow就向上移动</button>
<button id="btn06">点一下我yellow就向下移动</button>
<button id="btn07">点一下我yellow就向左变长</button>
<button id="btn08">点一下我yellow就向下变长</button>
<button id="btn09"><h1>TEST</h1></button>
<br /><br />
<div id="box01"></div>
<div id="box02"></div>
<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
</body>
</html>
11.定时器的应用2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box01{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
/*ie默认left=auto ，所以我们固定一个值给他就行*/
left: 0;
}
#box02{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
/*ie默认left=auto ，所以我们固定一个值给他就行*/
left: 0;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box01 = document.getElementById("box01");
//黄盒子
var box02 = document.getElementById("box02");
var btn03 = document.getElementById("btn03");
//实现更多功能
var btn04 = document.getElementById("btn04");
var btn05 = document.getElementById("btn05");
var btn06 = document.getElementById("btn06");
var btn07 = document.getElementById("btn07");
var btn08 = document.getElementById("btn08");
btn01.onclick = function(){
move(box01,"left",800,10);
};
btn02.onclick = function(){
move(box01,"left",0,10);
};
btn03.onclick = function(){
move(box02,"left",800,10);
};
//实现更多的功能: 长度 top
btn04.onclick = function(){
move(box02,"left",0,10);
};
btn05.onclick = function(){
move(box02,"top",0,10);
};
btn06.onclick = function(){
move(box02,"top",500,10);
};
/*yellow长度变长*/
btn07.onclick = function(){
move(box02,"width",800,10);
};
btn08.onclick = function(){
move(box02,"height",800,10);
};
var btn09 = document.getElementById("btn09");
btn09.onclick = function(){
move(box02,"width",800,10 , function(){
move(box02,"height",400,10,function(){
});
});
};
};
function getStyle(obj , name){
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
/*
* 当龟兔赛跑的时候，我们可以不适应用全局变量了，
* 因为都执行一个相同的函数，定时器一开始就暂停
*
* 怎么解决？？？
* 那就找到唯一标识obj.timer
* 这样就是各自带各自的定时器了
*/
//var timer;//注意这里
//封装成一个函数
/*
* 参数：
* obj 对象
* attr 属性
* target 到达目标
* speed 速度
*
* callback回调函数（续上无限可能）
*/
function move(obj ,attr, target , speed, callback){
//每一次开启之前都要关闭之前的，防止重复使用，速度变快
clearInterval(obj.timer);
/*
* 不应该让用户去判断，而是，让程序员判断
*/
var crruent = parseInt(getStyle(obj,attr));
if (crruent > target) {
//把负值变为正值
//把正值变负值
speed = -speed;
}
//开启定时器
obj.timer = setInterval(function(){
//获取box01原来的left值
//var oldValue = box01.offsetLeft;
//灵活一些，不止使用left，还有top，width，height等
//但是获取的值的是0px，需要使用parseInt()取整：只取到值的部分
var oldValue = parseInt(getStyle(obj,attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//小技巧：让它始终等于800
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当到八百的时候停止，但是当10改变的时候，不一定停止了，所以，还得加一个条件
if(newValue == target){
clearInterval(obj.timer);
//当函数定时器结束的时候，调用回调函数
//callback();
//当有回调函数的时候才有，不会导致不调用的出现undefined
callback && callback();
}
},30);
}
</script>
</head>
<body>
<button id="btn01">点一下我就向右移动</button>
<button id="btn02">点一下我就向左移动</button>
<button id="btn03">点一下我yellow就向右移动</button>
<button id="btn04">点一下我yellow就向左移动</button>
<button id="btn05">点一下我yellow就向上移动</button>
<button id="btn06">点一下我yellow就向下移动</button>
<button id="btn07">点一下我yellow就向左变长</button>
<button id="btn08">点一下我yellow就向下变长</button>
<button id="btn09"><h1>TEST</h1></button>
<br /><br />
<div id="box01"></div>
<div id="box02"></div>
<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
</body>
</html>
12.测试练习
- js模块的封装
-
function getStyle(obj , name){ if (window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj,null)[name]; }else{ //IE8的方式 return obj.currentStyle[name]; } } /* * 当龟兔赛跑的时候，我们可以不适应用全局变量了， * 因为都执行一个相同的函数，定时器一开始就暂停 * * 怎么解决？？？ * 那就找到唯一标识obj.timer * 这样就是各自带各自的定时器了 */ //var timer;//注意这里 //封装成一个函数 /* * 参数： * obj 对象 * attr 属性 * target 到达目标 * speed 速度 * * callback回调函数（续上无限可能） */ function move(obj ,attr, target , speed, callback){ //每一次开启之前都要关闭之前的，防止重复使用，速度变快 clearInterval(obj.timer); /* * 不应该让用户去判断，而是，让程序员判断 */ var crruent = parseInt(getStyle(obj,attr)); if (crruent > target) { //把负值变为正值 //把正值变负值 speed = -speed; } //开启定时器 obj.timer = setInterval(function(){ //获取box01原来的left值 //var oldValue = box01.offsetLeft; //灵活一些，不止使用left，还有top，width，height等 //但是获取的值的是0px，需要使用parseInt()取整：只取到值的部分 var oldValue = parseInt(getStyle(obj,attr)); //在旧值的基础上增加 var newValue = oldValue + speed; //小技巧：让它始终等于800 if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){ newValue = target; } //将新值设置给box1 obj.style[attr] = newValue + "px"; //当到八百的时候停止，但是当10改变的时候，不一定停止了，所以，还得加一个条件 if(newValue == target){ clearInterval(obj.timer); //当函数定时器结束的时候，调用回调函数 //callback(); //当有回调函数的时候才有，不会导致不调用的出现undefined callback && callback(); } },30); }
扫一扫
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
