当前位置: 首页> 房产> 市场 > 【前端】JavaScript入门及实战126-130

【前端】JavaScript入门及实战126-130

时间:2025/7/11 15:34:19来源:https://blog.csdn.net/weixin_45980065/article/details/140878310 浏览次数:0次

文章目录

  • 126 Location
  • 127 定时器
  • 128 切换图片练习
  • 129 修改移动div练习
  • 130 延时调用

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(){// 获取countvar 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设置为0index = 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(){// 设置方向为0dir = 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>
关键字:【前端】JavaScript入门及实战126-130

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: