<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双色球开奖</title>
<style>
.red {
height: 50px;
width: 50px;
border-radius: 25px;
background-color: red;
display: inline-block;
}
.blue {
height: 50px;
width: 50px;
border-radius: 25px;
background-color: blue;
display: inline-block;
}
span {
line-height: 50px;
display:block;
text-align: center;
}
div {
text-align: center;
}
.btn {
height: 50px;
width: 100px;
border-radius: 20px;
background-color: skyblue;
color: lightyellow;
font-size: large;
/*position: absolute;*/
/*top: 100px;*/
/*left: 200px;*/
}
</style>
</head>
<body>
<h3 align="center">双色球开奖</h3>
<div>
<!--双色球开奖号码-->
<div>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="blue"><span class="b"></span></p>
<p class="blue"><span class="b"></span></p>
</div>
<div>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="blue"><span class="b"></span></p>
<p class="blue"><span class="b"></span></p>
</div>
<div>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="blue"><span class="b"></span></p>
<p class="blue"><span class="b"></span></p>
</div>
<div>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="blue"><span class="b"></span></p>
<p class="blue"><span class="b"></span></p>
</div>
<div>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="red"><span class="r"></span></p>
<p class="blue"><span class="b"></span></p>
<p class="blue"><span class="b"></span></p>
</div>
</div>
<div><button class="btn" id="btn" onclick="shuangSeQiu();">开奖</button></div>
</body>
</html>
<script>
shuangSeQiu = function () {
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.监听xhr响应事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4)
{
//1.获取文档中的全部span标签，分红蓝两种
var redP = document.getElementsByClassName('r');
var blueP = document.getElementsByClassName('b');
//解析服务器传来的值
var ballArray = JSON.parse(xhr.responseText);
console.log(ballArray);
//将数字显示在html页面上
for (var i=0;i<25;++i)
{
redP[i].innerHTML = ballArray[i];
}
for (var i=0;i<10;++i)
{
blueP[i].innerHTML = ballArray[i+25];
}
}
};
xhr.open('get','shuangseqiu.php',true);
xhr.send(null);
}
</script><?php
//1.创建一个红球数字数组，范围1—66
$redBallArray = range(1,66);
//2.随机取出6个数字并数字混乱，一共5次
$temp = [];//建立这个数组以来放置5组双色球的数组
for ($i=0;$i<5;++$i)
{
for ($j=0;$j<5;++$j)
{
$red1 = array_rand($redBallArray,6); //取出6个数字
shuffle($red1);//打乱数组
$temp[$i][$j] = $red1[$j];
}
}
//查看一下$temp中是否包含了5组数字
//echo '<pre>';
//print_r($temp);
//3.接下来遍历出$temp中的数组,并生成一维数组$red2
foreach($temp as $item)
{
for ($z=0;$z<5;++$z)
{
$red2[]=$item[$z]<10?('0'.$item[$z]):$item[$z];
}
}
//经过测试，$red2这一维数组包含了25个红球数字
//echo '<pre>';
//print_r($red2);
//开始蓝球
//规定范围1-10
$blueBallArray = range(1,20);
//建立这个数组以来放置5组蓝双色球的数组
$temp2=[];
for ($i=0;$i<5;++$i)
{
for ($j=0;$j<2;++$j)
{
//取出任意两个
$blue1 = array_rand($blueBallArray,2);
shuffle($blue1);
$temp2[$i][$j]=$blue1[$j];
}
}
//echo '<pre>';
//print_r($temp2);
//生成一维数组$blue2
foreach ($temp2 as $item)
{
for ($i=0;$i<2;++$i)
{
$blue2[]=$item[$i]<10?('0'.$item[$i]):$item[$i];
}
}
//echo '<pre>';
//print_r($blue2);
$ballNumber = array_merge($red2,$blue2);
//转换为json数据
echo Json_encode($ballNumber);
