Question

我正在使用javascript创建一个游戏，它从六个模糊的图像开始，一旦选择了图像，它就显示出不模糊的图像。我想让不模糊的图像显示2秒钟，然后需要回到模糊的图像。

我的代码工作正常，但是当我尝试创建setTimeout函数时，图像不再改变。我试图将它创建为一个数组，并在最后有时间，但它没有工作。我也试过在showpicture函数结束时加时间，但它再次没有用。有人可以帮我创建setTimeout函数。

我的工作代码如下：

<!DOCTYPE html>
<html>
<head>
<title> Who Am I? </title>

<script type="text/javascript">

        var imageone = document.getElementById("Zero");
        var imagetwo = document.getElementById("One");
        var imagethree = document.getElementById("Two");
        var imagefour = document.getElementById("Three");
        var imagefive = document.getElementById("Four");
        var imagesix = document.getElementById("Five");

        function init() {
        init1();
        init2();
        init3();
        init4();
        init5();
        init6();
        };

        function init1 () {
        var imageone = document.getElementById("Zero");
        imageone.onclick = showAnswerone;
        }

        function init2 () {
        var imagetwo = document.getElementById("One");
        imagetwo.onclick = showAnswertwo;
        }

        function init3 () {
        var imagethree = document.getElementById("Two");
        imagethree.onclick = showAnswerthree;
        }

        function init4 () {
        var imagefour = document.getElementById("Three");
        imagefour.onclick = showAnswerfour;
        }

        function init5 () {
        var imagefive = document.getElementById("Four");
        imagefive.onclick = showAnswerfive;
        }

        function init6 () {
        var imagesix = document.getElementById("Five");
        imagesix.onclick = showAnswersix;
        }


        window.onload = init;

        function showAnswerone () {
        var imageone = document.getElementById("Zero");
        init1();
        imageone.src="Zero.jpg";
        }

        function showAnswertwo () {
        var imagetwo = document.getElementById("One");
        init2();
        imagetwo.src="One.jpg";
        }


        function showAnswerthree () {
        var imagethree = document.getElementById("Two");
        init3();
        imagethree.src="Two.jpg";
        }


        function showAnswerfour () {
        var imagefour = document.getElementById("Three");
        init4();
        imagefour.src="Three.jpg";
        }

        function showAnswerfive () {
        var imagefive = document.getElementById("Four");
        imagefive.src="Four.jpg";
        }

        function showAnswersix () {
        var imagesix = document.getElementById("Five");
        init5();
        imagesix.src="Five.jpg";
        }

        function submitForm()
        {
        var var_one = 0, var_two = 0, var_three = 0;
        var var_four = 0, var_five = 0, var_six = 0;
        }

        function var_oneb(){
            var_one=5;
            return true;
        }

        function var_onea(){
            var_one=0;
            return true;
        }

        function var_twob(){
            var_two=5;
            return true;
        }
        function var_twoa(){
            var_two=0;
            return true;
        }

        function var_threeb(){
            var_three=5;
            return true;
        }

        function var_threea(){
            var_three=0;
            return true;
        }


        function var_fourb(){
            var_four=5;
            return true;
        }

        function var_foura(){
        var_four=0;
        return true;
        }


        function var_fiveb(){
            var_five=5;
            return true;
        }

        function var_fivea(){
            var_five=0;
            return true;
        }

        function var_sixb(){
            var_six=5;
            return true;
        }

        function var_sixa(){
            var_six=0;
            return true;
        }


        function results_addition() {
        var var_results=var_one+var_two+var_three+var_four+var_five+var_six;
        if(var_results<=29){
            document.getElementById('choice1').value="Not all answers are correct";
        }
        else{
        if(var_results>=30){
        document.getElementById('choice1').value="All answers are correct";
        }
        else{
        document.getElementById('choice1').value="All answers are correct";
        }
        }
        }

</script>

<style>
    body {
    background-color: #ff0000;
    }

    div#grid {
        position: relative;
        width: 500px;
        height: 300px;
        margin-left: 50;
        margin-right: 50;
    }

    table {
        border-spacing: 0px;
        position: absolute;
        left: 40px;
        top: 40px;
        border-collapse: collapse;
        padding: 0px;
        margin: 0px;
    }

    td {
        border: 1px solid white;
        text-align: center;
        width: 160px;
        height: 110px;
        vertical-align: middle;
        align-content: stretch;
        padding: 5px;
        margin: 0px;
    }

    h2 {
        font-family: verdana, arial;
        text-align: center;
        color: white;
        font-size: 30px;
    }

    h3 {
        font-family: verdana, arial;
        text-align: center;
        color: white;
        font-size: 18px;
    }
</style>
</head>

<body>
    <div id="grid">
    <h2> Who Am I? </h2>
    <table>
    <tr>
    <td> <img id = "Zero" src = "Zeroblur.jpg"> </td>
    <td> <img id = "One" src = "Oneblur.jpg"> </td>
    <td> <img id = "Two" src = "Twoblur.jpg"> </td>
    </tr>
    <tr>
    <td> <img id = "Three" src = "Threeblur.jpg"> </td>
    <td> <img id = "Four" src = "Fourblur.jpg"> </td>
    <td> <img id = "Five" src = "Fiveblur.jpg"> </td>
    </tr>
    </table>
    </div>
    <br><br><br><br><br><br><br><br>
    <h3> I am a Rugby League Player. </h3>
    <h3> Click on me to reveal my identity! </h3>
    <br>
    <h3>Which Player am I</h3>
    <hr>
    <form action="">
    <h3>Player 1 </h3>
<center>
    <h3>  
    Shaun Johnson <INPUT TYPE="radio" NAME="Ra1" VALUE="0" onclick="var_onea()">   
    Sonny Bill Williams <INPUT TYPE="radio" NAME="Ra1" VALUE="5" onclick="var_oneb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 2 </h3>
<center>
    <h3>   
    Gareth Widdop <INPUT TYPE="radio" NAME="Ra2" VALUE="0" onclick="var_twoa()">   
    Sam Tomkins <INPUT TYPE="radio" NAME="Ra2" VALUE="5" onclick="var_twob()"> 
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 3 </h3>
<center>
    <h3>   
    James Graham <INPUT TYPE="radio" NAME="Ra3" VALUE="5" onclick="var_threea()">   
    Sam Burgess <INPUT TYPE="radio" NAME="Ra3" VALUE="10" onclick="var_threeb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 4 </h3>
<center>
    <h3>  
    Matthew Scott <INPUT TYPE="radio" NAME="Ra4" VALUE="5" onclick="var_foura()">   
    Johnathon Thurston <INPUT TYPE="radio" NAME="Ra4" VALUE="10" onclick="var_fourb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 5 </h3>
<center>
    <h3>  
    Neil Lowe <INPUT TYPE="radio" NAME="Ra5" VALUE="5" onclick="var_fivea()">   
    Danny Brough <INPUT TYPE="radio" NAME="Ra5" VALUE="10" onclick="var_fiveb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 6 </h3>
<center>
    <h3>  
    Mitch Garbutt  <INPUT TYPE="radio" NAME="Ra6" VALUE="5" onclick="var_sixa()">   
    Ryan Hall <INPUT TYPE="radio" NAME="Ra6" VALUE="10" onclick="var_sixb()">
    </h3>
</center>
    <br>
    <hr>
    <br>
<center>
    <INPUT TYPE="button" VALUE="Calculate" onclick="results_addition()"> Your Score:
    <INPUT TYPE="text" id="choice1" NAME="choice1" VALUE="" SIZE=30> 
</center>
</form>
</body>
</html>

Answer 1

要显示不模糊的图像，然后切换回模糊的图像，请使用此功能（本例中为4个）：

function showAnswerfive () {
    var imagefive = document.getElementById("Four");
    imagefive.src="Four.jpg";
    setTimeout (function() {
        imagefive.src="Fourblur.jpg";
    },2000);
}

修改

此外，您可以优化这些功能，基本上可以缩小到一个功能，并像这样存储图片：

<强> JS：

function showAnswerById (id) { var imagefive = document.getElementById(id); var blurredImage = imagefive.getAttribute("blurred-src"); var unBlurredImage = imagefive.getAttribute("unblurred-src"); imagefive.src=unBlurredImage; setTimeout (function() { imagefive.src=blurredImage ; },2000); }

<强> HTML：

<img id="Zero" blurred-src="Zeroblur.jpg" unblurred-src="Zero.jpg" src="Zeroblur.jpg">

如何在某些图像上使用setTimeout函数？

1 个答案: