php+html+css写一个双色球代码。具有刷新出现随机数字的功能!

image.png

php+html+css写一个双色球代码。具有刷新出现随机数字的功能!


双色球最重要的便是每个球的数字变化


本代码主要实现功能是:

html实现网页框架

css做⚪修饰网页

php做随机数字显示


以这三种技术合成后,做出的双色球


代码实现:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            figure{display:block;background:black;border-radius:50%;height:40px;
                   line-height:38px;width:40px;margin:20px 5px;float:left;text-align:center;
                   color:#FFFFFF;font-weight:bolder;}
            .red{
                background: -webkit-radial-gradient(10px 10px,circle,#ff0000,#000);
                background: -moz-radial-gradient(10px 10px,circle,#ff0000,#000);
                background: -ms-radial-gadient(10px 10px,circle,#ff0000,#000);
                background: radial-gradient(10px 10px,circle,#ff0000,#000);
            }
            .blue{
                background: -webkit-radial-gradient(10px 10px,circle,#0000ff,#000);
                background: -moz-radial-gradient(10px 10px,circle,#0000ff,#000);
                background: -ms-radial-gadient(10px 10px,circle,#0000ff,#000);
                background: radial-gradient(10px 10px,circle,#0000ff,#000);
            }
            </style>
    </head>
    <body>
        <?php
       $red_num=range(1,33);
       $keys=array_rand($red_num,6);
       shuffle($keys);
       foreach($keys as $v){
           $red[]=$red_num[$v]<10?('0'.$red_num[$v]):$red_num[$v];
       }
       $blue_num=rand(1,16);
       $blue=$blue_num<10 ? ('0'.$blue_num):$blue_num;
       foreach($red as $v){
           echo"<figure class=\"red\">$v</figure>";
       }
       echo "<figure class=\"blue\">$blue</figure>";
        ?>
    </body>
</html>

php+html+css写一个双色球代码。具有刷新出现随机数字的功能!