2016.11.29 JS
2016-11-29 本文已影响0人
看流沙聚散
arguments
arguments是对象的一个特殊属性。
arguments拥有数组长度属性length； 参数个数不固定， 我们用arguments.length
<script>
function fn(a,b,c){//a,b,c是形参
console.log(arguments[0]);//[a,b,c,d,e]显示的是一个数组 可以取下标显示；传入的实参集合与形参无关
console.log(arguments.length);
}
fn('a','b','c','d','e')//实参
获取元素样式
getComputedStyle ：标准下可用 非ie getComputedStyle(oDiv).width 获取宽度值
currentStyle ：ie 9以下 oDiv.currentStyle.width 获取宽度值
oDiv.onclick=function(){
var width=getComputedStyle(oDiv).width;//获取到宽度，是一个字符串
width=parseInt(width);//将字符串转化成数字
oDiv.style.width=width+10+'px';
}
setInterval定时器
格式：setInterval(函数，毫秒);
每隔一段时间执行传入的函数
setInterval返回值 代表就是定时器的标识
getComputedStyle：函数 内置函数 alert； parseInt ； parseFloat ； alert('1111'); parseInt('100px');
clearInterval();//定时器停止
综合例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
div{
height: 100px;
width: 100px;
background: red;
position: absolute;
left: 500px;
}
</style>
<button>移动</button>
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var oBtn = document.getElementsByTagName('button')[0];
//10px
oDiv.onclick = function(){
getComputedStyle;//函数 内置函数 alert parseInt parseFloat alert('1111'); parseInt('100px');
getComputedStyle(this);//=> { width: '100px', left: '0px', ........ }
getComputedStyle(this).width;//'100px'
var width = getComputedStyle(this).width;//'100px';
width = parseInt(width);
this.style.width = width+10+'px';
}
oBtn.onclick = function(){
var left = getComputedStyle(oDiv).left;//'0px'
left = parseInt(left);
oDiv.style.left = left+10+'px';
}
// var timer = setInterval( 函数, 毫秒 );
//每隔一段时间执行传入的函数
// var left = getComputedStyle(oDiv).left;
// left = parseInt(left);
// var timer = setInterval( function(){
// left+=5;
// if(left>=502){
// left = 502;
// }
// oDiv.style.left = left+'px';
// if(left===502){
// clearInterval(timer);
// }
// }, 30 );
// doMove( oDiv, 'left', 502);
oBtn.onclick = function(){
// doMove( oDiv, 'top', 502 );
}
//上下左右 目标点 元素
function doMove(obj, attr, target){
var position = getComputedStyle(obj)[attr];
position = parseInt(position);
var timer = setInterval(function(){
position+=5;
if(position>=target){
position = target;
}
obj.style[attr] = position+'px';
if(position==target){
clearInterval(timer);
}
}, 30)
}
var target = 1000;
var direction = true;//正方向 false反方向
var left = getComputedStyle(oDiv).left;
left = parseInt(left);
if(target<left){
direction= false;
}
var timer = setInterval(function(){
// var speed = 5;
// if(!direction){
// speed = -speed;
// }
// left += speed;
// if( direction && left>=3 || !direction && left<=3 ){
// left=3;
// }
// oDiv.style.left = left+'px';
// if(left===3){
// clearInterval(timer);
// }
if(direction){//正方向
left+=5;
if(left>=target){
left=target;
}
oDiv.style.left = left+'px';
if(left===target){
clearInterval(timer);
}
}
else{//反方向
left-=5;
if(left<=target){
left=target;
}
oDiv.style.left = left+'px';
if(left===target){
clearInterval(timer);
}
}
}, 30)
//一瞬间就完成
// for(var i=0; i<11;i++){
// document.title = i;
// }
// var i=0;
//setInterval返回值 代表就是定时器的标识
// var timer = setInterval( function(){
// document.title = i++;
// }, 1000);
// oBtn.onclick = function(){
// clearInterval( timer );
// }
</script>
</body>
</html>
