1
Ich kodiere eine Seite, die die Eigenschaften CSS top und left inkrementiert, um eine Animation mit zwei Sternen zu simulieren, die sich um eine Schaltfläche bewegen. Ich habe die Maße berechnet und es sah zuerst gut aus. Nach einigen Minuten werden die Sterne jedoch desynchronisiert und ändern die Animation nicht gleichzeitig. Sie sollten gleichzeitig eine Ecke erreichen. Kann mir bitte jemand erklären, warum das so ist und wie ich es beheben könnte? Mein JSFiddle ist hier: https://jsfiddle.net/MCBlastoise/1503x4tr/12/Desynchronisation in der Animation
Und hier ist mein Code:
body {
\t margin:0px;
}
.heading {
\t text-align:center;
\t font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
\t color:green;
\t font-weight:bold;
\t font-size:30px;
\t margin-top:0px;
}
.text {
\t color:red;
\t font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif;
\t font-size:21px;
\t text-align:justify;
\t margin-top:-15px;
}
br {
\t line-height:500%;
}
.container {
\t position:relative;
\t width:350px;
\t height:350px;
\t margin-top:42px;
\t margin-left:auto;
\t margin-right:auto;
}
.star {
\t width:40px;
\t height:40px;
\t position:absolute;
}
#starOne {
\t top:0px;
\t left:0px;
}
#starTwo {
\t top:310px;
\t left:310px;
}
.button {
\t width:250px;
\t height:250px;
\t border-style:solid;
\t border-color:red;
\t border-width:5px;
\t border-radius:60px;
\t text-align:center;
\t position:absolute;
\t bottom:50px;
\t left:50px;
}
.button:hover {
\t background-color: #7CFC00;
\t cursor:pointer
}
.button-text {
\t font-family:'Righteous', Courier New;
\t color:#9400D3;
\t font-size:76px;
\t line-height:125%;
}
#compliment {
\t text-align:center;
\t font-family:'VT323', Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
\t color:#ffd400;
\t font-size:50px;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Complement.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bungee+Shade|Josefin+Sans|VT323|Righteous">
<title>The Compliment Machine</title>
</head>
<body>
<h2 class="heading">The Compliment Machine</h2>
<p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. Pressing the button below will randomly generate a compliment. Hopefully, this little experiment will brighten up your day.</p>
<div class="container" id="container">
<img src="Star.png" class="star" id="starOne">
<div class="button" onclick="timedFunction()" onmouseenter="startingFunction(), startingFunction2()" onmouseleave="endFunction()"> <span class="button-text">Click me!</span> </div>
<img src="Star.png" class="star" id="starTwo">
</div>
<br>
<p id="compliment"></p>
<script>
\t var userName = prompt("What is your name?");
\t var generatedUserName = userName === null || userName === "";
\t var compliment = [
\t \t "Have a nice day",
\t \t "you contribute to society",
\t \t "Always be yourself",
\t \t "you are a wonderful person",
\t \t "Keep up the good work",
\t \t "never stop believing in yourself",
\t \t "you have a great sense of humor",
\t \t "You should feel proud of yourself",
\t \t "Never stop trying",
\t \t "you are a winner"
\t ];
</script>
<script>
\t function timedFunction() { \t \t
\t \t document.getElementsByTagName("DIV")[0].style.display = "none";
\t \t document.getElementsByTagName("DIV")[1].style.display = "none";
\t \t document.getElementsByTagName("IMG")[0].style.display = "none";
\t \t document.getElementsByTagName("IMG")[1].style.display = "none";
\t \t var repeater = setInterval(inspiration, 1000);
\t }
\t var inspiration = function inspire() {
\t \t var result = Math.random();
\t \t
\t \t //This code block checks for null, undefined, and other falsy values in the prompt.
\t \t if (generatedUserName) {
\t \t \t if (0 <= result && result < 0.11) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.21 <= result && result < 0.31) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.41 <= result && result < 0.51) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.71 <= result && result < 0.81) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.81 <= result && result < 0.91) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.11 <= result && result < 0.21) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.31 <= result && result < 0.41) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.51 <= result && result < 0.61) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.61 <= result && result < 0.71) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.91 <= result && result < 1) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t }
\t \t
\t \t //This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'.
\t \t if (0 <= result && result < 0.11) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[0]+", "+userName+"!";
\t \t };
\t \t if (0.11 <= result && result < 0.21) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[1]+".";
\t \t };
\t \t if (0.21 <= result && result < 0.31) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[2]+", "+userName+".";
\t \t };
\t \t if (0.31 <= result && result < 0.41) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[3]+".";
\t \t };
\t \t if (0.41 <= result && result < 0.51) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[4]+", "+userName+"!";
\t \t };
\t \t if (0.51 <= result && result < 0.61) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[5]+".";
\t \t };
\t \t if (0.61 <= result && result < 0.71) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[6]+".";
\t \t };
\t \t if (0.71 <= result && result < 0.81) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[7]+", "+userName+".";
\t \t };
\t \t if (0.81 <= result && result < 0.91) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[8]+", "+userName+".";
\t \t };
\t \t if (0.91 <= result && result < 1) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[9]+".";
\t \t };
\t }
\t var i = 0;
\t function limitedFunction() {
\t \t inspiration();
\t \t i++;
\t \t if (i === 5) {
\t \t \t document.getElementsByTagName("DIV")[0].style.display = "none";
\t \t \t document.getElementsByTagName("DIV")[1].style.display = "none";
\t \t \t document.getElementsByTagName("IMG")[0].style.display = "none";
\t \t \t document.getElementsByTagName("IMG")[1].style.display = "none";
\t \t }
\t }
</script>
<script>
\t var starOne = document.getElementById("starOne");
\t var starTwo = document.getElementById("starTwo");
\t var posLeft = 0;
\t var posTop = 0;
\t var posLeft2 = 310;
\t var posTop2 = 310;
\t
\t var startingFunction = function starterFunction() {
\t \t toRight = setInterval(moveRight, 1);
\t }
\t var startingFunction2 = function starterFunction2() {
\t \t toLeft = setInterval(moveLeft, 1);
\t }
\t
\t //The following four functions apply to the first star, which begins at the top-left.
\t function moveRight() {
\t \t posLeft++;
\t \t starOne.style.left = posLeft + 'px';
\t \t if (starOne.style.left === "310px") {
\t \t \t clearInterval(toRight);
\t \t \t toBottom = setInterval(moveDown, 1);
\t \t }
\t }
\t
\t function moveDown() {
\t \t posTop++;
\t \t starOne.style.top = posTop + 'px';
\t \t if (starOne.style.top === "310px") {
\t \t \t clearInterval(toBottom);
\t \t \t toLeft2 = setInterval(moveLeft2, 1);
\t \t }
\t }
\t
\t function moveLeft2() {
\t \t posLeft--;
\t \t starOne.style.left = posLeft + 'px';
\t \t if (starOne.style.left === "0px") {
\t \t \t clearInterval(toLeft2);
\t \t \t toTop2 = setInterval(moveUp2, 1);
\t \t }
\t }
\t
\t function moveUp2() {
\t \t posTop--;
\t \t starOne.style.top = posTop + 'px';
\t \t if (starOne.style.top === "0px") {
\t \t \t clearInterval(toTop2);
\t \t \t startingFunction();
\t \t }
\t }
\t
\t
\t //The following four functions apply to the second star, which begins at the bottom-right.
\t function moveLeft() {
\t \t posLeft2--;
\t \t starTwo.style.left = posLeft2 + 'px';
\t \t if (starTwo.style.left === "0px") {
\t \t \t clearInterval(toLeft);
\t \t \t toTop = setInterval(moveUp, 1);
\t \t }
\t }
\t
\t function moveUp() {
\t \t posTop2--;
\t \t starTwo.style.top = posTop2 + 'px';
\t \t if (starTwo.style.top === "0px") {
\t \t \t clearInterval(toTop);
\t \t \t toRight2 = setInterval(moveRight2, 1);
\t \t }
\t }
\t
\t function moveRight2() {
\t \t posLeft2++;
\t \t starTwo.style.left = posLeft2 + 'px';
\t \t if (starTwo.style.left === "310px") {
\t \t \t clearInterval(toRight2);
\t \t \t toBottom2 = setInterval(moveDown2, 1);
\t \t }
\t }
\t
\t function moveDown2() {
\t \t posTop2++;
\t \t starTwo.style.top = posTop2 + 'px';
\t \t if (starTwo.style.top === "310px") {
\t \t \t clearInterval(toBottom2);
\t \t \t startingFunction2();
\t \t }
\t }
\t
\t
\t //The following function cancels the animation when the mouse leaves the button.
\t function endFunction() {
\t \t //The following four if statements apply to the first star, which begins in the top-left.
\t \t if (0 <= posLeft && posLeft <= 310 && posTop === 0) {
\t \t \t clearInterval(toRight);
\t \t }
\t \t if (0 <= posTop && posTop <= 310 && posLeft === 310) {
\t \t \t clearInterval(toBottom);
\t \t }
\t \t if (0 <= posLeft && posLeft <= 310 && posTop === 310) {
\t \t \t clearInterval(toLeft2);
\t \t }
\t \t if (0 <= posTop && posTop <= 310 && posLeft === 0) {
\t \t \t clearInterval(toTop2);
\t \t }
\t \t
\t \t //The following four if statements apply to the second star, which begins in the bottom-right.
\t \t if (0 <= posLeft2 && posLeft2 <= 310 && posTop2 === 310) {
\t \t \t clearInterval(toLeft);
\t \t }
\t \t if (0 <= posTop2 && posTop2 <= 310 && posLeft2 === 0) {
\t \t \t clearInterval(toTop);
\t \t }
\t \t if (0 <= posLeft2 && posLeft2 <= 310 && posTop2 === 0) {
\t \t \t clearInterval(toRight2);
\t \t }
\t \t if (0 <= posTop2 && posTop2 <= 310 && posLeft2 === 310) {
\t \t \t clearInterval(toBottom2);
\t \t }
\t \t posLeft = 0;
\t \t posTop = 0;
\t \t posLeft2 = 310;
\t \t posTop2 = 310;
\t \t starOne.style.top = posTop + 'px';
\t \t starOne.style.left = posLeft + 'px';
\t \t starTwo.style.top = posTop2 + 'px';
\t \t starTwo.style.left = posLeft2 + 'px';
\t }
</script>
</body>
</html>
ich Ihr Problem nicht reproduzieren kann. –
Das Problem tritt nach einigen Minuten auf, wenn die Sterne zu verschiedenen Zeiten die gegenüberliegenden Ecken erreichen. – MCBlastoise