Question

我正在学习javascript并且我已经编写了一个简短的掷骰子应用程序，但是当单击该按钮时它不会运行。我看不出问题出在哪里。有人可以帮我这个。

    <!DOCTYPE HTML>
<html>
    <head>
        <script type=text/javascript>

        var face0= new Image() face0.src="d1.gif"
        var face1= new Image() face1.src="d2.gif"
        var face2= new Image() face2.src="d3.gif"
        var face3= new Image() face3.src="d4.gif"
        var face4= new Image() face4.src="d5.gif"
        var face5= new Image() face5.src="d6.gif"

        function rollDice(){
        var randomdice= Math.round(Math.random() *5)document.images["mydice"].src=eval("face" * randomdice+".src")
        }
        </script>
    </head>
    <body>
    <img src="d1.gif" name="mydice">
    <form>
    <input type="button" value="Roll" onclick="rollDice()">
    </form>

    </body>
</html>

Answer 1

分号不是可选的。浏览器会尝试尽可能地插入它们，但在很多时候它可能是错误的。

此外， 使用@！＃$ array ！这就是他们的目的！

试试这个：

(function() {
    var i, faces = [];
    for( i=0; i<6; i++) {
        (faces[i] = new Image()).src = "d"+(i+1)+".gif";
    }
    window.rollDice = function() {
        var side = Math.floor(Math.random()*6);
        document.getElementById('mydice').src = faces[side].src;
    }
})();

...

<img src="d1.gif" id="mydice" />

删除表单。您没有提交任何内容，因此您不需要表格。

Answer 2

请不要使用eval。而是做这样的事情：

var faces=[]
var numFaces=6;
for(var i=1;i<=numFaces;i++){
    var img=new Image();
    img.src='d'+i+'.gif';
    faces.push(img);
}
window.rollDice=function(){
    var randomdice= Math.floor(Math.random()*numFaces);
    document.images["mydice"].src=faces[randomdice].src;
}

jsFiddle：http://jsfiddle.net/jdwire/fZY3u/

Answer 3

你几乎就在那里 - 你的语句之间只需要semi colons，你需要用'+'连接字符串，而不是'*'

修改

正如Kolink指出的那样，eval is dangerous。

你实际上根本不需要实例化Image() - 假设你有骰子边的6个gif，你需要做的就是改变图像上的src文件名，像这样：

function rollDice(){ var randomdice= Math.round(Math.random() *5) + 1; // +1 since your gifs are 1-6 document.images["mydice"].src = "d" + randomdice.toString() + ".gif"; }

Updated Fiddle here

编辑请注意以下各点注意到的注意事项：此答案不会预先加载图片，这会在第一次触发每个骰子脸部gif时首次出现性能影响，在它被缓存之前。

Answer 4

你错过了分号;

    var face0= new Image(); face0.src="d1.gif";
    var face1= new Image(); face1.src="d2.gif";
    var face2= new Image(); face2.src="d3.gif";
    var face3= new Image(); face3.src="d4.gif";
    var face4= new Image(); face4.src="d5.gif";
    var face5= new Image(); face5.src="d6.gif";

    function rollDice(){
       var randomdice= Math.round(Math.random() *5); 
       document.images["mydice"].src=eval("face" + randomdice+".src");
    }

注意：始终整齐地格式化代码。不要在一行中写下所有代码，这会让你感到困惑。

简单的模具辊应用问题

4 个答案: