JavaScript基础（三）

小邪铭

于 2017-07-10 15:06:44 发布

阅读量216

点赞数

分类专栏：前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.offsetWidth

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: auto;
            border: 1px solid #ccc;
        }
        p{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding-left: 15px;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充
    自己填充自己填充自己填充自己填充自己填充自己填充自己填充自己填充

</div>
<p></p>
</body>
</html>
<script>
    var div = document.getElementsByTagName("div")[0];
    var p = document.getElementsByTagName("p")[0];
    console.log(div.offsetHeight);   // 596 -> 盒子内容的高度
    console.log(p.offsetWidth);  // 235  200 + border-left 10 + border-right 10+ padding-left 15 =235-> 盒子的实体大小
</script>

2.offsetLeft

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin:0;padding:0;}
        #father {
            margin: 100px;
            width: 400px;
            height: 400px;
            background-color: pink;
            /*position: absolute;*/ // 如果这个不注销。子孩子就相对这个。
        }
        #son {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son"></div>
</div>
</body>
</html>
<script>
    var son = document.getElementById("son");
    console.log(son.offsetLeft);  //  100 因为 父亲没有定位 ,所以是相对于body来说，如果父亲加了定位，那么结果就是0，因为这个是遵守最近父类定位原则。
    console.log(son.offsetTop);  //  100 因为 父亲没有定位
</script>

3.offsetParent

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            position: absolute;
        }
    </style>
</head>
<body>
<div class="one" id="one">
    <div class="two" id="two">
        <div class="three" id="three"></div>
    </div>
</div>
</body>
</html>
<script>
    var  three = document.getElementById("three");
    //alert(three.offsetParent.tagName);  // tagName 标签名字
    alert(three.offsetParent.id);  //    one 得到最近定位的父类的那个标签。
    alert(three.parentNode.id);  //   two
</script>

4.style.left 和 offsetLeft区别

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;
        }
    </style>
</head>
<body>
<div id="box" style="position: absolute; left: 100px;"></div>
</body>
</html>
<script>
    var box = document.getElementById("box");
    console.log(box.style.left);  // left top   z-index  只有定位才有
    console.log(box.offsetLeft);  // 不管有没有定位，它都能得到值

</script>

5.动画原理

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var timer = null;
    btn.onclick = function() {
        // 盒子本身的位置 +  步长
       timer = setInterval(function() {
           box.style.left = box.offsetLeft + 5 + "px";  // 核心的动画原理
           console.log(box.offsetLeft);
           // 到了某个地方就应该停止定时器
           if(box.offsetLeft >=400) {  // 知道为什么用 offsetLeft  不带px
               clearInterval(timer);
           }
       },30)
    }
</script>

封装缓动动画基本写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button>200</button>
<button>400</button>
<div></div>
</body>
</html>
<script>
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];
    var box = document.getElementsByTagName("div")[0];
    btn1.onclick = function() {
        animate(box,200);  //1参数 谁动  2参数 动 200
    }
    btn2.onclick = function() {
        animate(box,400);  //1参数 谁动  2参数 动 200
    }
    function animate(obj,target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
           // 运动公式  leader = leader + (target - leadaer) / 10
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + "px";
            if(target == obj.offsetLeft) {
                clearInterval(obj.timer);
            }
        },30)
    }
</script>

7.事件对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>
    document.onclick = function(event) {
        var event = event || window.event;
           console.log("您的x坐标是:" +event.clientX + "y坐标是:"+ event.clientY);
    }
</script>