Js控制div的旋转和暂停

以你之姓@ 2022-06-11 02:09 232阅读 0赞

Js控制div的旋转和暂停需要用到

setInterval以及clearInterval

我的代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .cont{
                margin: 100px auto;
                width: 300px;
                height: 300px;
            }
            .pic{
                width: 200px;
                height: 200px;
                background: url("img/c.jpg");
                background-size: cover;
                border-radius: 1000px;
                margin: 0 auto;
            }
            .btn{
                width:40px;
                height: 30px;
                display: block;
                margin: 20px auto;
                border-radius: 5px;
                cursor: pointer;
                font-size: 10px;
                background-color: #f5b702;
            }
        </style>
        <script>
            var rot=10-0;
            var time;
            var is_zhuan=false;
            function zhuan (){
                if(is_zhuan==true){
                    window.clearInterval(time);
                    is_zhuan=false;
                    document.getElementById("btn").value="转";
                }
                else{
                    time=window.setInterval(begin,10);
                    is_zhuan=true;
                    document.getElementById("btn").value="停";
                }
            }
            function begin(time){
                document.getElementById("pic").style.transform="rotatez("+rot+"deg)";
                rot+=1;
            }
        </script>
    </head>
    <body>
    <div class="cont">
    <div class="pic" id="pic">
    
    </div>
    <input type="button" id="btn" class="btn" value="转" οnclick="zhuan()"/>
    
    </div>
    </body>
    </html>