【西安校区】JavaScript定时器的简单小案例 - 黑马程序员技术交流社区

[JavaScript] 纯文本查看 复制代码

                        setInterval(function(){

                        },t)

                每隔t ms执行一次。***要注意，循环执行的***

[JavaScript] 纯文本查看 复制代码

clearInterval（定时器名称）；

[JavaScript] 纯文本查看 复制代码

let sum = setInterval(function(){

        console.log(x);

},100);



let x=9;

steTimeout(function(){

        clearInterval(sum);

},300)

[JavaScript] 纯文本查看 复制代码

<style>

    body{

        margin: 0;

    }

    .round{

        box-sizing: border-box;

        display: flex;

        justify-content: center;

        align-items: center;

        width: 400px;

        height: 400px;

        border:1px solid red;

        border-radius: 50%;

        margin:100px auto 0;

    }

    .point{

        width: 10px;

        height: 10px;

        border:1px solid blue;

        border-radius: 50%;

        background-color: blue;

    }

</style>

<body>

    <div class="round"> 

        <div class="point"></div>

    </div>

    <script>

        let oPoint=document.querySelector(".point");

        let STEP=Math.PI/60;

        let cow=0;



        setInterval(function(){

            oPoint.style.transform="translate("+200*Math.sin(cow)+"px,"+200*Math.cos(cow)+"px)";

            cow+=STEP;

        },1000/60)

    </script>