JS---基础_定时器的应用（一）

最新推荐文章于 2021-11-26 11:26:01 发布

chen_zan_yu_

最新推荐文章于 2021-11-26 11:26:01 发布

阅读量123

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/99701711

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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: cadetblue;
				left: 0;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				//点击以后，使box1向右移动，left值变大
				btn01.onclick = function(){
					
					//开启一个定时器，用来执行动画的效果
					var timer = setInterval(function(){
							
					//获取box1原来的值
						var oldValue =parseInt(getStyle(box1,"left"));
						
						//在旧值得基础上增加
						var newValue = oldValue + 10;
				
						//将新值设置给box1
						box1.style.left = newValue +"px";
						
						//当元素移动800px时，停止执行动画
						if(newValue >=  800){
							clearInterval(timer);
						}
						
					},30);
				};
			};
			
			function getStyle(obj,name){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[name];
				}else{
					return obj.currentStyle[name];
				}
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后box1向右移动</button>
		<div id="box1">
			
		</div>
	</body>
</html>

chen_zan_yu_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS---基础_定时器的应用（一）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ w...
复制链接

扫一扫