집 > 기사 > 웹 프론트엔드 > js 포물선에 대한 간단한 설명

js 포물선에 대한 간단한 설명

小云云원래의: 2018-03-22 16:11:381514검색

이 기사는 주로 js 포물선에 대한 간단한 설명을 공유합니다. 도움이 되기를 바랍니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {            margin: 0;            padding: 0;        }

        .box {            width: 0px;            height: 0px;            margin-left: 500px;            margin-top: 500px;            position: relative;        }

        .dian {            position: absolute;            width: 4px;            height: 4px;            margin-left: -2px;            margin-top: -2px;            border-radius: 50%;            background-color: red;        }

        .row {            position: absolute;            left: 50%;            margin-left: -250px;            width: 500px;            height: 1px;            background-color: green;        }

        .col {            position: absolute;            top: 50%;            margin-top: -250px;            width: 1px;            height: 500px;            background-color: green;        }
    </style></head><body>
    <p class="box">
        <p class="row"></p>
        <p class="col"></p>
        <p class="dian"></p>
    </p>
    <script>  
        var x = -100
        setInterval(function () {
            x = x + 2;            var y = -x * x / 100 + x / 100 + 30;            var dian = document.querySelector(&#39;.dian&#39;);
            dian.style.left = x + &#39;px&#39;;
            dian.style.top = -y + &#39;px&#39;;
        }, 10)    </script></body></html>

js 포물선에 대한 간단한 설명

관련 기사