用JavaScript实现元素自动旋转功能

最新推荐文章于 2024-09-08 09:38:00 发布

三个小菜鸟合体

最新推荐文章于 2024-09-08 09:38:00 发布

阅读量7.4k

点赞数 10

文章标签： javascript css js web

本文链接：https://blog.csdn.net/qq_49249150/article/details/108060805

版权

用JavaScript实现元素自动旋转功能

JavaScript模块

  <script>
        //声明一个函数
        function rotate() {
            //每隔100毫秒调用一次fun函数（调整旋转速度的地方）
            setInterval(fun, 100)
        }

        //声明一个number类型的变量
        var deg = 0;

        //声明一个函数
        function fun() {
            //指定id尾login的标签
            var obj = document.getElementById("login");
            //每次自增1度
            deg += 1;
            //长度加上单位deg
            var d = deg + "deg";
            //拼接控制旋转的方法
            obj.style.transform = "rotate(" + d + ")";
        }
    </script>

html模块

<!--调用函数-->
<body onload="rotate();">
<div class="re">
    <!--id为login-->
    <div class="fa" id="login">
        <div class="faa">
            <form>
                <div>账户：<input type="text"></div>
                <div>密码：<input type="password"></div>
                <div><input type="submit"></div>
            </form>
        </div>
    </div>
</div>
</body>