Is there a way to call a function using setInterval without changing the HTML style?

Question

Is there a way to call a function using setInterval without changing the HTML style?

<style>
        .a {
            width: 500px;
            height: 300px;
            background-color: #666;
        }

</style>

<body>
    <div class="a">

    </div>

    <script>
        function initiate() {

            setInterval( performRotation, 1000);
        }

        function performRotation() {
            document.getElementsByClassName('a')[0].style.transform = 'rotate(50deg)';
            document.getElementsByClassName('a')[0].style.transform = 'rotate(90deg)';
        }

        window.addEventListener('load', initiate);
    </script>
</body>

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

I encountered an issue where the transform style halts at 90deg and fails to proceed further.

My vision was to have the DIV tag oscillate between 50deg and 90deg.

Any suggestions on how to achieve this?

javascript html css

Answer 1

Answer №1

When it comes to rotation, the key is to keep updating the value of rotate in a timely manner. Below is an example for you to try:

<!DOCTYPE html>
<html lang="en>">
<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 startRotation() {
            let interval;
            // Remember to clear the interval
    if (interval) clearInterval(interval);
            interval = setInterval( rotateElement, 1000);
            
        }

        function rotateElement() {
        if (rotate > 360) rotate = 0;
        rotate += 50;
            document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;
        }

        window.addEventListener('load', startRotation);
    </script>
</body>
</html>

Answer 2

When it comes to rotation, the key is to keep updating the value of rotate in a timely manner. Below is an example for you to try:

<!DOCTYPE html>
<html lang="en>">
<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 startRotation() {
            let interval;
            // Remember to clear the interval
    if (interval) clearInterval(interval);
            interval = setInterval( rotateElement, 1000);
            
        }

        function rotateElement() {
        if (rotate > 360) rotate = 0;
        rotate += 50;
            document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;
        }

        window.addEventListener('load', startRotation);
    </script>
</body>
</html>

Answer 3

Answer №2

Kindly review this proposed solution. It appears that you are attempting to oscillate the value and restart the loop similar to a pendulum. If this is the case, the provided solution may assist in achieving the desired outcome.

.as-console-wrapper {
  max-height: 20px !important;
}
.a {
  transition: all 1s ease;
}

<!DOCTYPE html>
<html lang="en">
<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;
            // Remember 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>

Answer 4

Kindly review this proposed solution. It appears that you are attempting to oscillate the value and restart the loop similar to a pendulum. If this is the case, the provided solution may assist in achieving the desired outcome.

.as-console-wrapper {
  max-height: 20px !important;
}
.a {
  transition: all 1s ease;
}

<!DOCTYPE html>
<html lang="en">
<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;
            // Remember 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>

Answer 5

Answer №3

By combining both CSS changes in a single function that is executed every second, the transitions happen quickly one after the other. But there's a simpler way to achieve this:

function rotate() {

    const degrees = ['rotate(50deg)', 'rotate(90deg)'];

    setInterval(() => {
        document.getElementsByClassName('box')[0].style.transform = degrees[0];
        degrees.reverse();
    }, 1000);
}

window.addEventListener('load', rotate);

Although this approach works, consider using CSS animations for a smoother effect like this:

<style>
    .box {
        width: 500px;
        height: 300px;
        background-color: #666;

        animation: spinAnimation 2s infinite;
    }

    @keyframes spinAnimation {
        0% {
            transform: rotate(50deg);
        }
        50% {
            transform: rotate(90deg);
        }
        100% {
            transform: rotate(50deg);
        }
    }
</style>

To learn more about CSS animations, visit:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Answer 6

By combining both CSS changes in a single function that is executed every second, the transitions happen quickly one after the other. But there's a simpler way to achieve this:

function rotate() {

    const degrees = ['rotate(50deg)', 'rotate(90deg)'];

    setInterval(() => {
        document.getElementsByClassName('box')[0].style.transform = degrees[0];
        degrees.reverse();
    }, 1000);
}

window.addEventListener('load', rotate);

Although this approach works, consider using CSS animations for a smoother effect like this:

<style>
    .box {
        width: 500px;
        height: 300px;
        background-color: #666;

        animation: spinAnimation 2s infinite;
    }

    @keyframes spinAnimation {
        0% {
            transform: rotate(50deg);
        }
        50% {
            transform: rotate(90deg);
        }
        100% {
            transform: rotate(50deg);
        }
    }
</style>

To learn more about CSS animations, visit:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Is there a way to call a function using setInterval without changing the HTML style?

Answer №1

Answer №2

Answer №3

Similar questions

CSS - Inconsistencies in size rendering across Chrome and Safari

Sending a JavaScript Array to PHP results in receiving Undefined or Disallowed Key Characters

Jquery Validation Plugin - Specifically for validating numeric inputs in specific situations

Text "movement/vibration" in screen when adjusting dimensions in Firefox for Mac

Rotating a rectangular sprite around a sphere in three.js while keeping a minimum distance

What is the best way to manage DOM modifications in a responsive design layout?

What is the best way to target a nested selector in CSS?

AngularJS Issue [$injector:modulerr]

Another option instead of preloading images

Using AJAX to call a PHP function within a PHP script

Is there a way in Vue to switch between encrypted and unencrypted content in an input field?

MERN stack: HTML is currently processing while React is failing to compile

What steps should I follow to convert the cookie values into a 'key: value' array?

Unsubscribe from the Event Listener in Node.js

A guide on making an expandable div with absolute positioning in Angular Material

Determine the precise x and y coordinates of a centered element using JQuery

Is there a way to interact with specific locations on an image by clicking in JavaScript?

Prevent zooming on the entire webpage except for the images

Guide on creating a Sequelize query to retrieve all tasks linked to a specific user_id

Audio in A-Frame does not function properly when in VR mode