初学ajax,抽奖小代码
ajax_fill.js
//JavaScript Document
var XHR;//定义一个全局变量
var s;
var status = 1;
function createXHR() //首先我们得创建一个XMLHtpptRequest
{
if(window.ActiveXObject){
XHR = new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR = new XMLHttpRequest();
}
}
function fill_now()
{
createXHR();
XHR.open("GET","fill.php?input=1111111",true);
XHR.onreadystatechange=fill_ok;
XHR.send(null);
}
function fill_ok()
{
if(XHR.readyState == 4){
if(XHR.status == 200){
//var textHTML = XHR.responseText;
clearInterval(s)
status = 1;
setTimeout('filling_end()',2000);
//document.getElementById('checkbox').innerHTML = '<blink>'+textHTML+'</blink>';
//document.getElementById('checkbox').style.color = "red";
//document.getElementById('checkbox').style.border ="1px dashed #ff7300";
}
}
}
function end()
{
clearInterval(s);
fill_now();
}
//洗牌
function clean_ok()
{
document.getElementById('checkbox').innerHTML = "正在洗牌,请稍后!";
document.getElementById('checkbox').style.color = "#ff7300";
document.getElementById('checkbox').style.border = "1px dashed green";
setTimeout('xipai()',5000);
}
function xipai()
{
document.getElementById('checkbox').innerHTML = "洗牌完成!";
document.getElementById('checkbox').style.color = "#ff7300";
document.getElementById('checkbox').style.border = "1px dashed green";
}green
//摇奖
function fill_alling()
{
if(status==1){
s = setInterval('fill_all()',2000);
}
status = 0;
}
function fill_all()
{
setTimeout('filling1()',0);
setTimeout('filling2()',500);
setTimeout('filling3()',1000);
setTimeout('filling4()',1500);
}
function filling1()
{
document.getElementById('checkbox').innerHTML = "一等奖";
document.getElementById('checkbox').style.color = "green";
document.getElementById('checkbox').style.border ="1px dashed #ff7300";
}
function filling2()
{
document.getElementById('checkbox').innerHTML = "二等奖";
document.getElementById('checkbox').style.color = "blue";
document.getElementById('checkbox').style.border ="1px dashed #ff7300";
}
function filling3()
{
document.getElementById('checkbox').innerHTML = "三等奖";
document.getElementById('checkbox').style.color = "yellow";
document.getElementById('checkbox').style.border ="1px dashed #ff7300";
}
function filling4()
{
document.getElementById('checkbox').innerHTML = "特等奖";
document.getElementById('checkbox').style.color = "#ff0876";
document.getElementById('checkbox').style.border ="1px dashed #ff7300";
}
function filling_end()
{
var textHTML = XHR.responseText;
document.getElementById('checkbox').innerHTML = '<blink>'+textHTML+'</blink>';
document.getElementById('checkbox').style.color = "red";
document.getElementById('checkbox').style.border ="1px dashed #ff7300";
}
fill_action.html
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<!--<meta http-equiv="refresh" content="10;url=http://xylegend.myrice.com"/>-->
<html>
<head><title>ajax--抽奖</title></head>
<script type="text/javascript" src="ajax_fill.js"></script>
<body>
<form name="myform">
<h1>抽奖</h1>
GO:<input type="button" id="clean" name="clean" value="洗牌" style="background: #8DAD37;" onclick="clean_ok();"/>
<input type="button" id="start" name="start" value="抽奖开始" style="background: #ff7300;" onclick="fill_alling();"/>
<input type="button" id="stop" name="stop" value="抽奖结束" style="background: #ff7300;" onclick="fill_now();"/>
<font size="7"><span id="checkbox"></span></font>
</form>
</body>
</html>
fill.php
<?php
header("Content-type: text/html; charset=gbk");
$a = array_fill(0,50, 1);
$b = array_fill(0,16, 2);
$c = array_fill(0,2, 3);
$d = array_fill(0,32, 0);
$arr = array_merge($a, $b, $c, $d);
//var_dump($arr);
$a = mt_rand(0,99);
// echo '<br>';
if($arr[$a]==$a)
{
echo '☆-----特等奖-----☆';
}else{
if($arr[$a]==3)
{
echo '☆ 一等奖 ☆';
}else if($arr[$a]==2)
{
echo '☆ 二等奖 ☆';
}else if($arr[$a]==1)
{
echo '☆ 三等奖 ☆';
}else
{
//echo $_GET['input'];
echo '☆ 机会多多请再接再厉!☆';
}
}
?>