-1

我已经让你知道我不擅长说英语：S。如果我说错了句子，那你就知道为什么了。

我制作了一个脚本，我可以在其中输入颜色、高度和宽度。如果您单击提交，您将在屏幕上看到结果。

我正在尝试使用 setInterval 为结果设置动画。我想看看结果的变化。

我希望你知道我的意思..

我的脚本：

function button(){  
            var width = 0;
            var height = 0;


            var color= document.getElementById("color").value;
            var lengte = document.getElementById("lang").value + 'px';
            var breedte = document.getElementById("breed").value + 'px';

            width++

            document.getElementById("result").style.backgroundColor = color;
            document.getElementById("result").style.width = breedte;
            document.getElementById("result").style.height = lengte;

            if(width == breedte){
                clearInvent(id)
            }
            var id = setInterval(button);
        }
        function maakEvent(){
            document.getElementById("button").onclick = button;
        }
        window.onload = maakEvent;

我的 HTML：

<table>
        <tr>
            <td>What color do you want to show?</td><td><input type="text" id="color"></td>
        </tr>
        <tr>
            <td>How long must it be?</td><td><input type="text" id="lang"></td>
        </tr>
        <tr>
            <td>how wide should it be?</td><td><input type="text" id="breed"></td>
        </tr>
        <tr>
            <td><input type="submit" value="show" id="button"></td>
        </tr>
    </table>
    <div id="result"></div>

单词：lengte/lang 和breedte/breed 是荷兰语单词。它意味着长度和宽度。他们是荷兰人，因为我说荷兰语。

我做错了什么？

4

1 回答 1

0

根据 drive235 的建议，您应该使用 jquery，但如果没有这个，您也可以获得结果。但是您使用 SetInterval 语法发出问题：

SetInterval(function(){ }, <interval in millisecond>);

你应该写：

 var id = setInterval(function() {button()}, 30000);

另一个问题是您分配的值：

 document.getElementById("result").style.width = breedte;

您在第一次迭代本身中分配最终宽度，因此每次都相同，并且不会看到任何效果。

您的代码应该是：

document.getElementById("result").style.width = width;

编辑：

这是完整的代码，它适用于 Chrome（至少）：

    <script type="text/javascript">
   var id;
   var width = 0;
    function test(){
     id = setInterval(function(){ button()},1000);
     }
    function button(){  

        var height = 0;


        var color= document.getElementById("color").value;
        var lengte = document.getElementById("lang").value + 'px';
        var breedte = document.getElementById("breed").value + 'px';

        width+=10;

        document.getElementById("result").style.backgroundColor = color;
        document.getElementById("result").style.width = width
        document.getElementById("result").style.height = lengte;

        if(width == breedte){
            clearInvent(id)
        }

    }
    function maakEvent(){
        document.getElementById("button").onclick = test;
    }
    window.onload = maakEvent;

于 2013-10-26T18:45:19.220 回答