文章目录
- 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">window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){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(){var count = document.getElementById("count");var num = 1;var timer = setInterval(function(){count.innerHTML = num++; if(num == 11){clearInterval(timer);}},1000);};
</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(){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;var btn01 = document.getElementById("btn01");btn01.onclick = function(){clearInterval(timer);timer = setInterval(function(){index++;index %= imgArr.length;img1.src = imgArr[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>
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">window.onload = function(){var speed = 10;var dir = 0;setInterval(function(){switch(dir){case 37:box1.style.left = box1.offsetLeft - speed + "px";break;case 39:box1.style.left = box1.offsetLeft + speed + "px";break;case 38:box1.style.top = box1.offsetTop - speed + "px";break;case 40:box1.style.top = box1.offsetTop + speed + "px";break;}},30);document.onkeydown = function(event){event = event || window.event;if(event.ctrlKey){speed = 500;}else{speed = 10;}dir = event.keyCode;};document.onkeyup = function(){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;var timer = setTimeout(function(){console.log(num++);},3000);clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>
