JavaScript – 程式設計教育農場 by 陳富國

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <div class=""> 輸入您的姓名：<input id="input_name" type="text" name="" value=""> <br> 請選擇你最喜歡的顏色：<br> <input type="radio" name="color" value="red"> red<br> <input type="radio" name="color" value="green"> green<br> <input type="radio" name="color" value="blue"> blue<br> 日期: <input type="date" id="date-input" required> <hr> <button type="button" name="button" onclick="submitForm();">Submit</button> </div> <script type="text/javascript"> function submitForm(){ console.log( $('#input_name').val() ); //取得姓名的輸入 console.log( $('input[name="color"]:checked').val() ); //取得顏色的選取值 var date = new Date($('#date-input').val()); //取得選取的日期，並產生一個日期物件 console.log( date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate() ); } </script> </body> </html>

這個範例主要是示範如何用隨機數取值，隨機存取一張撲克牌。

之後延伸應用可以隨機抽5張牌、13張牌，或者做一個覆蓋在桌面的16張牌(二二配對、隨機放在16個二維的格子上，使用者隨機翻牌，若連續翻到2張花色一樣的，得分…)。

這個範例也能應用到籤詩的選取，例如梅花心易，

下載一組撲克牌圖片：http://acbl.mybigcommerce.com/52-playing-cards/

解開放在images目錄下

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    img {
      width: 300px;
    }
    .button{
      border-radius: 20px;
      outline: none;
      margin: 10px auto;
      font-size: 40px;
    }    
  </style>

</head>
<body>
  <div id="card">
    <img src="images\blue_back.png">
  </div>
  <button class="font button" onclick="selectCard();">取卡</button>    

  
  <script>
    function selectCard(){
      var cards1 = ["", "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];    
      var card_n1 = cards1 [getRandom(1,14)];

      var cards2 = ["D", "H", "S", "C"];
      var card_n2 = getRandom(0,4);
      var card = card_n1 + cards2[card_n2];
      console.log( card  );

      var card_div = document.getElementById("card");

      card_div.innerHTML =  `<img src='images/${card}.png' alt='Playing Card'>`;      

    }

    function getRandom(min, max) { //  min <= x < max, x是整數亂數
      return Math.floor(Math.random() * (max - min) ) + min;
    }  


  </script>

</body>
</html>

以上程式取亂數是基於從下載資源下載下來的撲克牌檔名安排：AD、2D~10D、JD、QD、KD 方塊A~K，前面的是A~K，後面是花色：D 方塊、H紅心、S黑桃、C梅花

鏟子(Spade)、紅心(Heart)、鑽石(Diamond)、三葉草(Club)、Jack(侍從)、Queen(王后)、King(國王)、Ace(第一)

分類: JavaScript

JavaScript/jQuery – 取得一些型態輸入的值範例

JavaScript – 隨機選取一張撲克牌