Question

我希望使用基本的HTML，CSS和JS在浏览器上依次显示所有扑克牌。

这是我到目前为止所拥有的

$(document).ready(function() {
    //Creating the Card  
    function Card(rank, suit) {
        this.rank = rank;
        this.suit = suit;
    };
});

Answer 1

这是我想出的。在JS代码中，数组排名会有   卡片的价值/等级，正如预期的那样，牌组 52   卡片，甲板阵列也是如此。同样的事情   类型。这些都是数组。

接下来是类型的迭代/循环和内部的内部/子循环   等级的类型。在排名中，您将访问该排名   显示功能接受卡和号码作为参数。

<强> HTML

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <div id="cards" class=""></div>
</body>
<script src="jquery.min.js"></script>
<script src="card.js"></script>
</html>

<强> CSS

.card{
    border:1px solid #ccc;
    border-radius: 2px;
    background: #fff;
    color:#444;
    width: 150px;
    height:250px;
    margin: 10px;
    display: inline-block;
}
.top, .bottom{
    font-size:24px;
    padding: 10px;
}
.bottom{
    float: right;
}
.number, .icon{
    display: block;
}
.rotate{
    transform: rotate(180deg);
     -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
}
.lg_icon{
    font-size: 70px;
    text-align: center;
    display: block;
}
.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

<强> JS

 $(document).ready(function() {
        //Creating the Card  
        function Card(rank, suit) {
            this.rank = rank;
            this.suit = suit;
        };
        //Array containing all the ranks
        var rank = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10",
            "J", "Q", "K");
        //Array with the card types using the unicode representations.
        var types = new Array("&clubs;", "&diams;", "&hearts;", "&spades;");

        //Array with the expected total number of cards 
        this.deck = new Array(52);
        var i;
        var j;
        for (i = 0; i < types.length; i++) {
            for (j = 0; j < rank.length; j++) {
                this.deck[i * rank.length + j] = new Card(rank[j], types[i]);
                displayCard(types[i], rank[j]);
            }
        }
        //This function helps to display the card. 
        //The function accepts card type and number to display each card dynamically.
        function displayCard(card, number) {
            var cardDiv = '<div class="card"><div class="top"><span class="number">' + number + '</span><span class="icon">' + card + '</span></div><div class="lg_icon">' + card + '</div><div class="bottom"><span class="icon rotate">' + card + '</span><span class="number rotate">' + number + '</span></div></div>';

            //Append the cardDiv variable to the div with the id card in the body.
            $('#cards').append(cardDiv);
        }
    });

希望这有帮助

在浏览器中生成扑克牌

1 个答案: