Question

我试图从52个牌组中获得六张随机牌，以便在javascript中使用Math.random（）。到目前为止，我的图像都没有出现。我的所有css3和javascript都嵌入在我的html5代码中。此外，我的所有图像都是gif图像。您可能会在html5代码中注意到die1是blank.gif而evrything是blank.png。我的设置图像功能应该改变src，所以我认为这无关紧要。我的代码如下，感谢您的帮助：

<!DOCTYPE html>

<html>
<head>
<meta charset = "utf-8">
<title>Card Trick</title>
<style type="text/css">
    .table{
        position:relative;
        top:50px;
        left:50px;
        width:1700px;
        height:800px;
        background-color:crimson;
    }
    .key{
    position:absolute;
    top:15px;
    left:50px;
  }
    .startButton{
        width:50px;
        height:50px;
        background-color:black;
        color:white;
    }
    .card{
        position:absolute;
        top:250px;
        left:250px;
        width:20px;
        height:20px;
    }
</style>
<script type="text/javascript">
    var card1Image;
    var card2Image;
    var card3Image;
    var card4Image;
    var card5Image;
    var card6Image;

    function start(){
        var button = document.getElementById("startButton");
        button.addEventListener("click", pickCards, false);
        card1Image = document.getElementById("card1");
        card2Image = document.getElementById("card2");
        card3Image = document.getElementById("card3");
        card4Image = document.getElementById("card4");
        card5Image = document.getElementById("card5");
        card6Image = document.getElementById("card6");
    }
    function pickCards(){
        setImage(card1Image);
        setImage(card2Image);
        setImage(card3Image);
        setImage(card4Image);
        setImage(card5Image);
        setImage(card6Image);
    }
    function setImage(cardImg){
        var cardValue = Math.floor(1 + Math.random() * 52);
        cardImg.setAttribute("src", "C:/Users/Robert/Desktop/cards/" + cardValue + ".gif");
    }
    window.addEventListener("load", start, false);
</script>
</head>

<body>
<div class = "table"></div>
<div class = "key">
    <form action = "#">
    <p><input type = "button" class = "startButton" value = "start"></p>
    </form>
</div>
<div class = "card">
<p><img id = "card1" src = "blank.gif">
   <img id = "card2" src = "blank.png">
   <img id = "card3" src = "blank.png">
   <img id = "card4" src = "blank.png">
   <img id = "card5" src = "blank.png">
   <img id = "card6" src = "blank.png"></p>
</div>
</body>
</html>

Answer 1

您忘了将按钮的 id 设置为startButton。在您当前的代码中，您尝试通过 id 获取按钮，但该按钮没有 id ，而是具有值{的 class 属性{1}}。

您可以将startButton属性更改为按钮的class属性，以解决问题：

id

Answer 2

当您想要从硬盘驱动器访问数据时，需要使用file://网址作为图像来源。

cardImg.setAttribute("src", "file://C:/Users/Robert/Desktop/cards/" + cardValue + ".gif");

或者更好地设置像xampp这样的网络堆栈，并使用它开发您的应用程序。

使用Javascript生成六张随机卡

2 个答案: