时间戳

首页 > 解决方案 > 如何将动画 gif 添加到 javascript 程序

javascript - 如何将动画 gif 添加到 javascript 程序

问题描述

我对编码世界很陌生，我正在学习 JavaScript 的编码训练营。我们创建了一个猜数游戏，我正在尝试添加一个动画，该动画将在输入正确答案后运行。我已经用谷歌搜索了几次试图找到答案，但我想看看是否有更简单的方法。我在下面包含了该程序的副本。如果我想在输入正确答案后出现动画，我该怎么做？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Number Guessing Game</title>
    </head>
    <body style='background-color:black'>
        <h1>Number Guessing Game</h1>
        <button type="button" onclick="runGame()">Start Game</button>
        <script>
            function runGame() {
                let guessString ='';
                let guessNumber = 0;
                let correct = false;
                let numTries = 0;

                const randomNumber = Math.random() * 100;
                const randomInteger = Math.floor(randomNumber);
                const target = randomInteger + 1;

                do {
                    guessString = prompt('I am thinking of a number in the range 1 to 100.\n\nWhat is the number?');
                    guessNumber = +guessString;
                    numTries += 1; 
                    correct = checkGuess(guessNumber, target, numTries);
                } while (!correct);

                alert('You got it! The number was ' + target + '.\n\nIt took you ' + numTries + ' tries to guess correctly.');
            }

            function checkGuess(guessNumber, target, numTries) {
                let correct = false;

                if (isNaN(guessNumber)) {
                    alert('Alright smarty pants!\n\nPlease enter a number in the 1-100 range.');
                } else if ((guessNumber < 1) || (guessNumber > 100)) {
                    alert('Please enter an integer in the 1-100 range.');
                } else if (guessNumber > target) {
                    alert('Your number is too large!\n\nGuess Number: ' + numTries + '.');
                } else if (guessNumber < target) {
                    alert('Your number is too small!\n\nGuess Number: ' + numTries + '.');
                } else {
                    correct = true;
                }
                return correct;
            }
        </script>
    </body>
</html>

标签： javascript

解决方案

要做到这一点，您需要学习DOM 操作。

这是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Number Guessing Game</title>
    </head>
    <body style='background-color:black'>
        <h1>Number Guessing Game</h1>
        <button type="button" onclick="runGame()">Start Game</button>
        <script>
            function runGame() {
                let guessString ='';
                let guessNumber = 0;
                let correct = false;
                let numTries = 0;

                const randomNumber = Math.random() * 100;
                const randomInteger = Math.floor(randomNumber);
                const target = randomInteger + 1;

                do {
                    guessString = prompt('I am thinking of a number in the range 1 to 100.\n\nWhat is the number?');
                    guessNumber = +guessString;
                    numTries += 1; 
                    correct = checkGuess(guessNumber, target, numTries);
                } while (!correct);

                alert('You got it! The number was ' + target + '.\n\nIt took you ' + numTries + ' tries to guess correctly.');
                // add your gif to the dom
                // create an img element
                const img = document.createElement("img")
                // set the source of the gif
                img.src = "https://i0.wp.com/badbooksgoodtimes.com/wp-content/uploads/2017/12/plankton-correct-gif.gif?fit=400%2C287"
                // add the img element to the dom
                // in this case we are gonna add it after the 'start game' button, so
                // select the button element
                const btn = document.querySelector("button")
                // insert the img element after the button
                btn.parentNode.insertBefore(img, btn.nextSibling);
                
            }

            function checkGuess(guessNumber, target, numTries) {
                let correct = false;

                if (isNaN(guessNumber)) {
                    alert('Alright smarty pants!\n\nPlease enter a number in the 1-100 range.');
                } else if ((guessNumber < 1) || (guessNumber > 100)) {
                    alert('Please enter an integer in the 1-100 range.');
                } else if (guessNumber > target) {
                    alert('Your number is too large!\n\nGuess Number: ' + numTries + '.');
                } else if (guessNumber < target) {
                    alert('Your number is too small!\n\nGuess Number: ' + numTries + '.');
                } else {
                    correct = true;
                }
                return correct;
            }
        </script>
    </body>
</html>

继续前进，祝你好运。

推荐阅读