Javascript jquery Add one more solar-earth-moon structure

Asked 2 years ago, Updated 2 years ago, 35 views

I'm constantly modifying the code, but I don't know what to do with it...

<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        window.onload = function () {
            var sun = document.getElementById('sun');
            var earth = document.getElementById('earth');
            var moon = document.getElementById('moon');

            sun.style.position = 'absolute';
            earth.style.position = 'absolute';
            moon.style.position = 'absolute';
            sun.style.left = 250 + 'px';
            sun.style.top = 200 + 'px';

            var earthAngle = 0;
            var moonAngle = 0;

            setInterval(function () {
                var earthLeft = 250 + 150 * Math.cos(earthAngle);
                var earthTop = 200 + 150 * Math.sin(earthAngle);
                var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
                var moonTop = earthTop + 50 * Math.sin(moonAngle);

                earth.style.left = earthLeft + 'px';
                earth.style.top = earthTop + 'px';
                moon.style.left = moonLeft + 'px';
                moon.style.top = moonTop + 'px';

                earthAngle += 0.1;
                moonAngle += 0.3;
            }, 1000 / 30);
        };
    </script>
</head>
<body>
    <h1 id="sun">@</h1>
    <h1 id="earth">O</h1>
    <h1 id="moon">*</h1>
</body>
</html>

Problematic code.

This code creates a structure in which O revolves around @ and * revolves around O.

이 구조 옆에 같은 구조를 하나 더 만들고 싶은데, 어떻게 해야 이게 만들어질 수 있을지 모르겠습니다...

javascript jquery

2022-09-20 14:32

2 Answers

If I set up another computer next to your computer and write down the code above, will it also be "made the same structure next to it"? It's like a pun, but if you put the problem you gave me in a literal way and ask the infrastructure team to solve it, you can really approach this "problem" in a roughly similar way.

That's not the problem, is it? Identify the meaning, scope, and conditions of the problem. Solving the problem is only after the problem is revealed.

Please let me know again when it's done. But normally, you can see the real problem with this much, so you can see the answer roughly.


2022-09-20 14:32

I'll write it down in the answer column to attach the picture.

I uploaded the gif file, but I'm not sure if it'll play. This is how it's printed. In that picture, @ is the sun, O is the earth, *this month. If you actually do it, it's spinning. I'd like to print the same output as the current picture.

Two and three. The output in the picture to the right of the Google screen, code wise I want to print it out at a point where the left value is 700. It's the same as making.

Thank you for your question guide. I don't know if you wrote the question as you intended. This is my first time using this site..


2022-09-20 14:32

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.