js-day12

作者: Rosemarry丶 | 来源:发表于2017-12-07 20:35 被阅读0次

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>

相关文章

  • js-day12

    A.我今天学了什么 1.js获取css样式 2.object 3.多个属性封装

网友评论

      本文标题:js-day12

      本文链接:https://www.haomeiwen.com/subject/jmijixtx.html