代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>双色球抽奖php</title>
  8. </head>
  9. <body>
  11. <?php
  12. //  1. 生成1-33个红球
  13. $arr = range(1,33);
  14. // 2. 从33个红球中随机取出6个
  15. shuffle($arr);
  16. $res = array_slice($arr, 0, 6);
  17. sort($res);
  18.  // 3. 生成一个蓝球, 并追加到中奖数组中
  19. $blue = rand(1,16);
  20. array_push($res,$blue);
  21.  // 4. 将中奖号码显示到页面中 
  22. echo '<div class ="box">';
  23. foreach ($res as  $value) {
  24.     printf('<div>%s</div>',$value);
  25. }
  26. echo '</div>';
  27. ?>  
  28. <!-- 双色球CSS样式 -->
  29. <style>
  30.         .box {
  31.             display: grid;
  32.             grid-template-columns: repeat(auto-fill, 45px);
  33.             grid-auto-rows: 45px;
  34.             gap: 5px;
  35.         }
  37.         .box>div {
  38.             font-size:22px;
  39.             border-radius: 50%;
  40.             display: grid;
  41.             place-items: center;
  42.             background-color: red;
  43.             color: white;
  44.             box-shadow: 2px 2px 2px #666;
  45.         }
  47.         .box>div:last-of-type {
  48.             background-color: blue;
  49.         }
  50.     </style>  
  51. </body>
  52. </html>

实现效果