js-day12
2017-12-07 本文已影响0人
Rosemarry丶
A.我今天学了什么
1.js获取css样式
function getStyle(ele,name){
if (ele.currentStyle) {
// ie
return oDiv.currentStyle[name];
} else {
// 谷歌
return getComputedStyle(ele, false)[name];
}
}
2.object
对象 字面量的形式
自定义一个空对象
var obj = {};
对象 都有 属性 和 方法;
*_______________ 给对象扩展(添加)属性 _______________________*/
obj.a = 1;
obj.b = 2;
obj.c = 3;
var obj = {
a : 1,
b : 2,
c : 3
}
当访问对象中没有这个属性的时候。就出现undefined
var json = {
"width" : "100px",
"height" : "100px",
"background": "#000",
"top": "50px"
}
*----------------------访问对象属性--------------------------------*/
点的形式
中括号的形式 json[]
*----------------------遍历对象--------------------------------*/
for in 循环
for(var attr in json){
console.log(json[attr])
console.log(attr)
}-->
3.多个属性封装
<script type="text/javascript">
var btn = document.getElementsByTagName("button")[0];
var div =document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function () {
// animate( div,"top",500 )
animate( div,{"width":1500,"height":100,"top":150,"left":200} )
//
}
function animate(obj,json){ /*让谁动 怎么动 动到哪里*/
// 先清除定时器
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
// 获取当前样式
var current = parseInt(getStyle(obj,attr))
var target = parseInt(json[attr]);
// 缓动公式
var step = (target - current)/10;
// 给step 取整 ceil
step = step>0?Math.ceil(step):Math.floor(step);
// console.log(step)
// 动起来
obj.style[attr] = current + step + "px";
// 当到目标位置时。清除定时器
console.log(attr,json[attr],current)
if(current === target){
clearInterval(obj.timer )
}
}
}, 30)
}
// var a = getStyle(div,"width") 测试好用 ok
function getStyle(obj,attr){
if(obj.currentStyle){
// ie
return obj.currentStyle[attr]
}else{
// 谷歌
return window.getComputedStyle(obj,null)[attr]
}
}
</script>