基于JS怎样写个动态的旋转风车-群英

上一篇：用JS+CSS实现卡片轮播的具体代码是什么下一篇：cropper.js+exif.js怎样实现头像上传的基本编辑操作

这篇文章主要讲解了“基于JS怎样写个动态的旋转风车”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

这是一个动态网页，下面是css文件的代码，废话少说，上代码：

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

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

接下来是js的文件

<body>
<div>
    <h3>我爱玩风车</h3>
    <img src="../img/logo.png" class="" alt="" id="img1">
    <hr>
    <input type="button" value="开始" onclick="start1()">
    <input type="button" value="停止" onclick="stop1()">
    <input type="button" value="反转" onclick="reverse()">
    <input type="button" value="转1圈" onclick="circle(1)">
    转<input type="text" size="1" value="" onblur="circle(this.value)">圈

</div>
</body>
<script>
    function circle(n){
        //处于停止状态
        if(img1.className==''){
            start1()
        }
        //已经在转了
        setTimeout(stop1,2000*n)


    }

    //反转
    function reverse(){
        img1.className='rfc'
    }

    //转起来
    function start1() {
        img1.className='fc'
    }
    //停下来
    function stop1() {
        img1.className=''
    }

</script>

查看成品：