Ich habe ein Bild. Ich habe einen Code geschrieben, der es über En über drehen wird, aber die setInterval() Funktion funktioniert nicht.setInterval() funktioniert nicht mit drehen
Bitte können Sie mir sagen, warum?
Sie müssen den Gradwert bei jedem Funktionsaufruf erhöhen, indem Sie einfach eine Variable verwenden. In Ihrem Fall wird es immer auf 10degree drehen bleiben.
DEMO:
var star = document.getElementById('star'),
deg = 10;
setInterval(function() {
star.style.transform = "rotate(" + deg + "deg)";
deg = (deg + 10) % 360
}, 10);#star {
width: 100px;
height: 100px;
background: red;
}<div id="star"></div>Sie hier verwenden können css animation
@keyframes anim {
0% {
transform: rotate(0deg);
}25% {
transform: rotate(90deg);
}50% {
transform: rotate(180deg);
}75% {
transform: rotate(270deg);
}100% {
transform: rotate(360deg);
}
}
#star {
width: 100px;
height: 100px;
background: red;
animation: anim .36s infinite;
}<div id="star"></div>maximale Grad ist 360. Aber Sie erhöhen es auf unbestimmte Zeit. –
@RajaprabhuAravindasamy: aktualisiert .... –
@RajaprabhuAravindasamy 'maximale Grad ist 360' - Ich stimme nicht zu, haben Sie etwas, um Ihren Anspruch zu unterstützen? – James
Kleine Probe:
var ready = function() {
var
star = document.getElementById('star'),
degree = 0;
setInterval(function() {
/* Every 10ms degree variable increase its value by 1 */
star.style.transform = "rotate(" + ++degree +"deg)"; }, 10
);
};#star {
margin-left: 100px;
margin-top: 40px;
width: 60px;
border: 1px solid;
padding: 20px;
}<body onload="ready()">
<div id="star">
<h1>Yay!</h1>
</div>
</body>Danke Everone! Codes funktionieren :) – Artdark92
Erhöhen Sie den Grad jedes Mal. Sie vergeben den gleichen Grad über en over. –