PHP 作业2.9 双色球

要求


php随机生成8个不同的随机数


效果图


在这里插入图片描述


index.php代码


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>双色球33-16</title>
  <style>
    .main {
      border: 7px dotted #00bcff;
      width: 999px;
      margin: 222px auto;
      padding: 28px;
      font-size: 28px;
    }

    h1 {
      text-align: center;
    }

    button {
      height: 50px;
      display: block;
      margin: 20px auto;
    }

    button:hover {
      background-color: greenyellow;
    }

    /* 第一种背景颜色 */
    .bg1 {
      display: inline-block;
      background: red;
      border-radius: 100%;
      height: 100px;
      width: 100px;
      margin-right: 10px;
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      color: greenyellow;
      font-weight: bold;
      /* background: radial-gradient(circle at 30% 35%,
          #ddd,
          blue 0%,
          black 120%); */
      background: radial-gradient(circle at 35% 20%,
          #ddd,
          red,
          black);
    }


    /* 第二种背景颜色 */
    .bg2 {
      display: inline-block;
      background: blue;
      border-radius: 100%;
      height: 100px;
      width: 100px;
      /* margin: 10px; */
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      color: greenyellow;
      font-weight: bold;
      background: radial-gradient(circle at 35% 20%,
          #ddd,
          blue,
          black);
    }
  </style>
</head>

<body>
  <?php
  //设置红球数组范围:1-36
  $red = range(1, 33);
  //随机从数组抽取8个数字
  $reds = array_rand($red, 8);
  //打乱排序
  shuffle($reds);
  //设置蓝色球数组范围
  $blue = range(1, 16);
  //随机选取一个的索引下标
  $blues = array_rand($blue, 1);
  //把下标转换为所需要的值
  $b = $blue[$blues];
  //访问数组索引
  ?>

  <div class="main">
    <h1>双色球33(7)+16(1)</h1>

    <button onclick="sx()">开始摇号抽奖</button>

    <div id="red">
      <?php
      foreach ($reds as $r) {
        echo "<div class='bg1'>" . $red[$r] . "</div>";
      }
      ?>


      <div class="bg2" id="blue">
        <?php
        echo $b;
        ?>
      </div>

    </div>
    <script>
      function sx() {
        location.reload();
      }
    </script>


</body>

</html>

效果图2


在这里插入图片描述


index1.php


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>体育彩票367</title>
  <style>
    .main {
      border: 7px dotted #00bcff;
      width: 999px;
      margin: 222px auto;
      padding: 28px;
      font-size: 28px;
    }

    h1 {
      text-align: center;
    }

    button {
      height: 50px;
      display: block;
      margin: 20px auto;
    }

    button:hover {
      background-color: greenyellow;
    }

    /* 第一种背景颜色 */
    .bg1 {
      display: inline-block;
      background: blue;
      border-radius: 100%;
      height: 100px;
      width: 100px;
      /* margin: 10px; */
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      color: greenyellow;
      font-weight: bold;
      /* background: radial-gradient(circle at 30% 35%,
          #ddd,
          blue 0%,
          black 120%); */
      background: radial-gradient(circle at 35% 20%,
          #ddd,
          blue,
          black);
    }

    /* 第二种背景颜色 */
    .bg2 {
      background-color: red;
    }

    .ball {
      display: inline-block;
      width: 100%;
      height: 100%;
      margin: 0;
      border-radius: 50%;
      position: relative;

      background-size: 100%;
    }

    .ball:before {
      content: "";
      position: absolute;
      top: 0%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 0px,
          #ffffff,
          rgba(255, 255, 255, 0) 58%);
      -webkit-filter: blur(5px);
      z-index: 2;
    }

    .ball:after {
      content: "";
      position: absolute;
      border-radius: 100%;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: radial-gradient(circle at 50% 30%,
          rgba(245, 237, 48, 0),
          rgba(200, 190, 20, 0.2) 50%,
          #575300 100%);
    }

    .ball .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle,
          rgba(0, 0, 0, 0.4),
          rgba(0, 0, 0, 0.1) 40%,
          rgba(0, 0, 0, 0) 50%);
      -webkit-transform: rotateX(90deg) translateZ(-160px);
      transform: rotateX(90deg) translateZ(-160px);
      z-index: 1;
    }

    .stage {
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 10px;
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      font-weight: bold;
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -ms-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
    }
  </style>
</head>

<body>
  <?php
  //设置数组范围:1-36
  $num = range(1, 33);
  //随机从数组抽取8个数字
  $nums = array_rand($num, 8);
  //打乱排序
  shuffle($nums);


  //访问数组索引
  ?>

  <div class="main">
    <h1>体育彩票367</h1>

    <button onclick="sx()">开始摇号抽奖</button>

    <div class="ball stage bg2">
      <?php
      echo $num[$nums[0]];
      ?>
    </div>
    <div class="ball stage bg2">
      <?php
      echo $num[$nums[1]];
      ?>
    </div>
    <div class="ball stage bg2">
      <?php
      echo $num[$nums[2]];
      ?>
    </div>
    <div class="ball stage bg2">
      <?php
      echo $num[$nums[3]];
      ?></div>
    <div class="ball stage bg2">
      <?php
      echo $num[$nums[4]];
      ?>
    </div>
    <div class="ball stage bg2">
      <?php
      echo $num[$nums[5]];
      ?>
    </div>
    <div class="ball stage bg2">
      <?php
      echo $num[$nums[6]];
      ?>
    </div>

    <div class="bg1">
      <?php
      echo $num[$nums[7]];
      ?>
    </div>

  </div>
  <script>
    function sx() {
      location.reload();
    }
  </script>


</body>

</html>
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值