阅读量:0
文章目录
126 Location
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> </style> <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> </head> <body> <button id="btn">点我一下</button> <h1>Location</h1> <input type="text" /> <a href="01.BOM.html">去BOM</a> </body> </html> 127 定时器
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function(){ // 获取count var count = document.getElementById("count"); // 使count中的内容，自动切换 /* JS的程序的执行速度是非常非常快的 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用 */ /*for(var i=0 ; i<10000 ; i++){ count.innerHTML = i; alert("hello"); }*/ /* setInterval()：定时调用，可以将一个函数，每隔一段时间执行一次 参数：1.回调函数，该函数会每隔一段时间被调用一次 2.每次调用间隔的时间，单位是毫秒 返回值：返回一个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> 128 切换图片练习
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function(){ /* 使图片可以自动切换 */ // 获取img标签 var img1 = document.getElementById("img1"); // 创建一个数组来保存图片的路径 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]; // 创建一个变量，用来保存当前图片的索引 var index = 0; // 定义一个变量，用来保存定时器的标识 var timer; // 为btn01绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ /* 目前，我们每点击一次按钮，就会开启一个定时器， 点击多次就会开启多个定时器，这就导致图片的切换速度过快， 并且我们只能关闭最后一次开启的定时器 */ // 在开启定时器之前，需要将当前元素上的其他定时器关闭 clearInterval(timer); /* 开启一个定时器，来自动切换图片 */ timer = setInterval(function(){ // 使索引自增 index++; // 判断索引是否超过最大索引 /*if(index >= imgArr.length){ //则将index设置为0 index = 0; }*/ index %= imgArr.length; // 修改img1的src属性 img1.src = imgArr[index]; },1000); }; // 为btn02绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ // 点击按钮以后，停止图片的自动切换，关闭定时器 /* clearInterval()可以接收任意参数， 如果参数是一个有效的定时器的标识，则停止对应的定时器 如果参数不是一个有效的标识，则什么也不做 */ clearInterval(timer); }; }; </script> </head> <body> <img id="img1" src="img/1.jpg"/> <br /><br /> <button id="btn01">开始</button> <button id="btn02">停止</button> </body> </html> 129 修改移动div练习
<!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(){ // 定义一个变量，来表示移动的速度 var speed = 10; // 创建一个变量表示方向 // 通过修改dir来影响移动的方向 var dir = 0; // 开启一个定时器，来控制div的移动 setInterval(function(){ /* 37 左 38 上 39 右 40 下 */ switch(dir){ 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; } },30); // 为document绑定一个按键按下的事件 document.onkeydown = function(event){ event = event || window.event; // 当用户按了ctrl以后，速度加快 if(event.ctrlKey){ speed = 500; }else{ speed = 10; } // 使dir等于按键的值 dir = event.keyCode; }; // 当按键松开时，div不再移动 document.onkeyup = function(){ // 设置方向为0 dir = 0; }; }; </script> </head> <body> <div id="box1"></div> </body> </html> 130 延时调用
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> </style> <script type="text/javascript"> 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> 