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 { max-height: 20px !important;}.a { transition: all 1s ease;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .a { width: 100px; height: 100px; /* border: 1px solid red; */ background-color: red; margin: 40px auto; }</style></head><body> <div class="a"> </div> <script> let rotate = 60; function first() { let interval; // Don't forget to clear the interval if (interval) clearInterval(interval); interval = setInterval( a, 1000); } function a() { if(rotate === 60) rotate += 60; else rotate -= 60; console.log(rotate); document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`; } window.addEventListener('load', first); </script></body></html> -
侃侃无极
其实是在旋转。您需要rotate按时更新该值。你可以试试这个——<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .a { width: 100px; height: 100px; /* border: 1px solid red; */ background-color: red; margin: 40px auto; }</style></head><body> <div class="a"> </div> <script> var rotate = 0; function first() { let interval; // Don't forget to clear the interval if (interval) clearInterval(interval); interval = setInterval( a, 1000); } function a() { if (rotate > 360) rotate = 0; rotate += 50; document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`; } window.addEventListener('load', first); </script></body></html> -
蛊毒传说
您在一个函数 (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>
随时随地看视频慕课网APP
相关分类
Html5