js定时器和事件：玩转风车案例

通过css和js的定时器，实现让这个风车图片转起来。

这里没有图片的可以截取文章中的图片

HTML代码：

<div>
    <h3>我爱玩风车</h3>
    <img src="img/logo.png" class="a" alt="" id="img1">

    <hr>

    <input type="button" value="开始" οnclick="start1()">
    <input type="button" value="停止" οnclick="stop1()">
    <input type="button" value="反转" οnclick="reverse()">
    <input type="button" value="转1圈" οnclick="circle(1)">
    转<input type="text" size="1" value="" οnblur="circle(this.value)">圈

</div>

CSS代码：

<style>
        .fc{
            animation:wm 2s infinite linear;
        }
        @keyframes wm {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(-360deg);
            }
        }

        .reverseC{
            animation:reversewm 2s infinite linear;
        }
        @keyframes reversewm {
            from {
                transform:rotate(-360deg);
            }
            to {
                transform:rotate(0deg);
            }
        }


    </style>

JS代码：

<script>
    //转起来
    function start1() {
        document.getElementById("img1").className='fc'
    }
    //翻转
    function reverse() {
        document.getElementById("img1").className='reverseC'
    }
    //停下来
    function stop1() {
        document.getElementById("img1").className=''
    }

    function circle(obj){
        let a = document.getElementById("img1");
        a.className='fc'

        let s1=new Date().getSeconds()
        a=setTimeout(function () {
            stop1()
        },2000*obj)
    }
</script>