一个定时器的应用

Posted 2021-01-14 c-cl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个定时器的应用相关的知识，希望对你有一定的参考价值。

<!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;
				/*此处加上left为0，是因为ie浏览器中，自动获取left值显示为 
                                     auto.是无法进行计算的，
				 在css中添加上left的值，ie浏览器就可以获取left的值进行计算 
                                 */
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取box1
				var box1=document.getElementById("box1");
				var btn=document.getElementById("btn");
				var timer;
				/*
				 * 定义一个函数，用来获取指定元素的当前样式
				 * 参数：
				 * 		obj要获取样式的元素
				 * 		name要获取的样式名
				 */
				function getStyle(obj,name){
					if(window.getComputedStyle){
						//正常浏览器的方式，具有getComputedStyle()方 
                                                   法
						return getComputedStyle(obj,null)[name];
					}else{
						//ie8的方式，没有getComputedStyle()方法
						return obj.currentStyle[name];
					}
					//return window.getComputedStyle?getComputedStyle(obj,null)[name];
				}
				//点击按钮以后，使box1向右移动(left值增大)
				btn.onclick=function(){
					//开启一个定时器，用来执行动画效果
					//获取到的left为0px，和数字无法直接相加，需要提取有效数字
					//parseInt()函数可解析一个字符串，并返回一个整数
					/*
					 * parseInt()语法：
					 * 	parseInt(string,radix);
					 * 		string 必需，要被解析的字符串
					 * 		radix  可选，表示要解析的数字的基数，该值介于2-36之间
					 * 			如果省略该参数或其值为0，则数字将以10为基础来解析。
					 * 			如果它以“0x”或"0X"开头，将以16为基数
					 * 			如果该参数小于2或者大于36，则parseInt()将返回NaN
					 */
					//定时器多次点击只开一次，点击两次会关闭上一次定时器
					clearInterval(timer);
					timer=setInterval(function(){
						//获取box1原来的left值
						//getStyle()获取当前显示的样式
						var oldValue=parseInt(getStyle(box1,"left"));
						//在旧值的基础上增加
						var newValue=oldValue+10;
						//将新值设置给box1
						box1.style.left=newValue+"px";
						//做个优化，如果加速不是10，相加无法正好等于800，那就无法停下
						//判断newValue是否大于800
						if(newValue>800){
							newValue=800;
						}
						
						//当元素移动到800px时，使其停止执行动画
						if(newValue==800){
							//到达目标，停止动画
							clearInterval(timer);
						}
					},30);
				}
			}
		</script>
	</head>
	<body>
		<button id="btn">点击按钮以后box1向右移动</button>
		<br /><br />
		<div id="box1"></div>
		<div id="" style="width: 0px;height: 1000px; border-left:1px black solid;position: absolute;left: 800px;top: 0;">
			
		</div>
	</body>
</html>

总结知识点：

一个小方块在摁下按钮后向右侧一直运动，直到800px位置停下。
要记得清除css的默认样式
```
*{
```

                           margin: 0;
                           padding: 0;
	                       }

box1要移动就要开启定位，posistion:absolute;
移动是利用定时器循环移动
给按钮绑定单击响应函数
函数内添加定时器
定时器要根据当前显示的样式变化，按设定的时间进行变化
获取偏移量，getStyle(obj,stringName);
直接获取到当前盒子的位置得到的是数字+px，不能进行直接计算，否则得到的是NaN，要提取出来有效数字用函数parseInt();
最先从浏览器里获取到的偏移量是旧值，旧值的基础上增加成为新值，将新值赋予给box1 box1.style.left=newValue+"px";

以上是关于一个定时器的应用的主要内容，如果未能解决你的问题，请参考以下文章