标签：turn order int agg top charset 浏览器 rip compute
<!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>
总结知识点：
*{
margin: 0;
padding: 0;
}
标签：turn order int agg top charset 浏览器 rip compute
原文地址：https://www.cnblogs.com/c-cl/p/9824953.html
