用Javascript生成六张随机卡片_Javascript

用Javascript生成六张随机卡片

javascript

用Javascript生成六张随机卡片,javascript,Javascript,我正试图从52张卡片中随机抽取6张，并使用javascript中的Math.random（）来显示。到目前为止，我的照片都没有出现。我所有的css3和javascript都嵌入到我的html5代码中。此外，我所有的图像都是gif图像。在html5代码中，您可能会注意到die1是blank.gif，而evrything else是blank.png。我的set image函数应该改变src，所以我认为这不重要。我的代码如下，感谢您的帮助： <!DOCTYPE html> <ht

我正试图从52张卡片中随机抽取6张，并使用javascript中的Math.random（）来显示。到目前为止，我的照片都没有出现。我所有的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>


纸牌戏法
.桌子{
位置：相对位置；
顶部：50px；
左：50px；
宽度：1700px；
高度：800px；
背景颜色：深红色；
}
.钥匙{
位置：绝对位置；
顶部：15px；
左：50px；
}
.开始按钮{
宽度：50px；
高度：50px；
背景色：黑色；
颜色：白色；
}
.卡片{
位置：绝对位置；
顶部：250px；
左：250px；
宽度：20px；
高度：20px；
}
var-card1图像；
var-card2Image；
var-card3Image；
var-card4Image；
var-card5Image；
var-card6Image；
函数start（）{
var按钮=document.getElementById（“startButton”）；
按钮。addEventListener（“单击”，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”）；
}
函数pickCards（）{
设置图像（card1Image）；
设置图像（card2Image）；
setImage（card3Image）；
setImage（card4Image）；
setImage（card5Image）；
setImage（card6Image）；
}
函数设置映像（cardImg）{
var cardValue=Math.floor（1+Math.random（）*52）；
setAttribute（“src”，“C:/Users/Robert/Desktop/cards/”+cardValue+“.gif”）；
}
window.addEventListener（“加载”，开始，错误）；

当您想从硬盘访问数据时，需要使用

文件：//

URL作为图像源

cardImg.setAttribute（“src”，“file://C:/Users/Robert/Desktop/cards/”+cardValue+.gif”）
或者最好设置一个webstack，并使用它开发应用程序。
您忘记将按钮的id设置为startButton
。在当前代码中，您试图按id获取按钮，但按钮没有id，而是具有值startButton
的class属性
您可以将按钮的class
属性更改为id
属性，以解决问题：
<p><input id="startButton" type = "button" value = "start"></p>


我看到该代码的一个大问题是，没有任何东西可以防止重复卡。。。您需要使每个数字都是唯一的。您的按钮也不需要包装在表单标记中，因为它是由事件侦听器处理的。@Gary Hayes您是对的，我忽略了这个细节。感谢您指出。添加文件：//未显示图像。如果我键入图像的名称，如C:/Users/Robert/Desktop/cards/1.gif，其中有blank.gif，则图像会显示。我的问题是如何从我的cards文件夹中的52中获取随机图像，以便card1是随机的。谢谢你花时间看我的问题。顺便说一句，我误解了你的问题。删除属性定义中等号之间的空格type=“button”
是无效的html，应该是type=“button”
。