用Javascript生成六张随机卡片

Generating six random cards with Javascript

本文关键字：六张 随机 Javascript      更新时间：2023-09-26

我正试图使用javascript中的Math.random（）从一副52张牌中随机获得六张牌。到目前为止，我的照片都没有出现。我所有的css3和javascript都嵌入到我的html5代码中。此外，我所有的图片都是gif图片。您可能会注意到，在html5代码中，die1是blank.gif，而evrything else是blank.png。我的set image函数应该会更改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>

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

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

<p><input id="startButton" type = "button" value = "start"></p>

当您想从硬盘访问数据时，需要使用file:// URL作为图像源。

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

或者更好地设置一个类似examplep的webstack并使用它开发应用程序。

相关文章：