猿问

setInterval调用函数和html样式没有变化？

<style>

        .a {

            width: 500px;

            height: 300px;

            background-color: #666;

        }


</style>


<body>

    <div class="a">


    </div>


    <script>

        function first() {


            setInterval( a, 1000);

        }


        function a() {

            document.getElementsByClassName('a')[0].style.transform = 'rotate(50deg)';

            document.getElementsByClassName('a')[0].style.transform = 'rotate(90deg)';

        }


        window.addEventListener('load', first);

    </script>

</body>

https://jsfiddle.net/TyTyT/frmawt85/

我发现变换样式停在90度处，不再改变了。


我想象的是 DIV 标签将在 50 度和 90 度之间摆动。


怎么做？


德玛西亚99
浏览 86回答 3
3回答

泛舟湖上清波郎朗

请检查此解决方案。我认为您正在尝试恢复该值并像钟摆一样再次启动循环，如果是这种情况，那么我希望这个解决方案会有所帮助。.as-console-wrapper {&nbsp; max-height: 20px !important;}.a {&nbsp; transition: all 1s ease;}<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* border: 1px solid red; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 40px auto;&nbsp; &nbsp; &nbsp; &nbsp; }</style></head><body>&nbsp; &nbsp; <div class="a">&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp;let rotate = 60;&nbsp; &nbsp; &nbsp; &nbsp; function first() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let interval;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Don't forget to clear the interval&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (interval) clearInterval(interval);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; interval = setInterval( a, 1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function a() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(rotate === 60) rotate += 60;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else rotate -= 60;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(rotate);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; window.addEventListener('load', first);&nbsp; &nbsp; </script></body></html>
0

侃侃无极

其实是在旋转。您需要rotate按时更新该值。你可以试试这个——<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* border: 1px solid red; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 40px auto;&nbsp; &nbsp; &nbsp; &nbsp; }</style></head><body>&nbsp; &nbsp; <div class="a">&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp;var rotate = 0;&nbsp; &nbsp; &nbsp; &nbsp; function first() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let interval;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Don't forget to clear the interval&nbsp; &nbsp; if (interval) clearInterval(interval);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; interval = setInterval( a, 1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function a() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (rotate > 360) rotate = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rotate += 50;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; window.addEventListener('load', first);&nbsp; &nbsp; </script></body></html>
0

蛊毒传说

您在一个函数 (a) 中同时调用这两个 CSS 更改，并且该函数每秒触发一次。事情就是这样发生的，但速度很快。在这个非常简单的情况下你可以做的是这样的：function first() {    const degs = ['rotate(50deg)', 'rotate(90deg)'];    setInterval(() => {        document.getElementsByClassName('a')[0].style.transform = degs[0];        degs.reverse();    }, 1000);}window.addEventListener('load', first);这可行，但是......我会在这里使用 CSS 动画。像这样的东西也会带来很好的平滑感：<style>    .a {        width: 500px;        height: 300px;        /* border: 1px solid red; */        background-color: #666;        animation: exampleAnimation 2s infinite;    }    @keyframes exampleAnimation {        0% {            transform: rotate(50deg);        }        50% {            transform: rotate(90deg);        }        100% {            transform: rotate(50deg);        }    }</style>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答