1
我正在編寫一個頁面，該頁面將CSS top和left屬性遞增，以便模擬兩顆星圍繞按鈕移動的動畫。我計算了測量值，起初看起來很好。然而，幾分鐘後，恆星變得不同步，並且不會同時改變動畫。他們應該同時到達角落。有人可以解釋爲什麼這是，我怎麼能解決它？我的jsfiddle是在這裏：https://jsfiddle.net/MCBlastoise/1503x4tr/12/動畫中的不同步
這裏是我的代碼：
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>
我無法重現您的問題。 –
幾分鐘後，當星星在不同時間到達對角時，問題就會出現。 – MCBlastoise