以下index.html源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
*{font-size: 14px;}
#container{width: 800px; margin: 0 auto; margin-top: 10px; padding: 10px 0 5px 30px;}
.num{width: 830px; margin: 0 auto;}
h2{margin: 3px;}
strong{color: red;}
#result{width: 600px; margin: 0 auto; margin-top: 10px;}
.info{width: 200px; height: 120px; line-height: 15px; float: left;}
h3{text-align: center;}
.clear{clear: both;}
#but{ width: 100px; position: fixed; right: 8px; top: 30px; margin: 10px auto;}
* html, * html body , * html #wrapper, * html #content{margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
* html #content{overflow: auto; width: auto;}
* html #but{position: absolute;}
.details{border-collapse: collapse; margin: 10px auto; background: url(but.png) no-repeat;}
.details td{padding: 5px;}
.bh{width: 86px; text-align: center; height: 84px;}
.bm{width: 100px; text-align: center;}
.mz{width: 150px; text-align: center;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="result">
</div>
<div class="clear"></div>
<div class="num">参与人数：<strong id="num"></strong>人</div>
<div id="container">
<div id="show">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
</div>
<div id="winner">
</div>
</div>
</div>
<div id="but"><input type="button" value="抽奖" /></div>
</div>
<script type="text/javascript">
<!--
function $(str){return document.getElementById(str);}
if(!document.all){
Node.prototype.selectNodes = function (sExpr)
{
var doc = (this.nodeType == 9) ? this : this.ownerDocument;
var nsRes = doc.createNSResolver(this.nodeType == 9 ? this.documentElement : this);
var xpRes = doc.evaluate(sExpr, this, nsRes, 5, null);
var res = [];
var item;
while (item = xpRes.iterateNext())
{
res[res.length] = item;
}
return res;
}
Node.prototype.selectSingleNode = function (xPath)
{
var doc = (this.nodeType == 9) ? this : this.ownerDocument;
var nsRes = doc.createNSResolver((this.nodeType == 9) ? this.documentElement : this);
var xpRes = doc.evaluate(xPath, this, nsRes, 9, null);
return xpRes.singleNodeValue;
}
}
var arr = [], result = [];
if(window.XMLHttpRequest) var xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("get", "test.xml?a="+Math.random(), true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var xmlDom = xmlhttp.responseXML;
var oMembers = xmlDom.selectNodes("info/member");
for(var i = 0, l = oMembers.length; i < l; i++){
arr.push([oMembers[i].selectSingleNode("name").firstChild.data, oMembers[i].selectSingleNode("img").firstChild.data, oMembers[i].selectSingleNode("department").firstChild.data, oMembers[i].selectSingleNode("id").firstChild.data]);
$("num").innerHTML = arr.length;
}
showMember(arr);
}
}
}
xmlhttp.send(null);
Array.prototype.shuffle = function(times){
var start, deleteCount;
times = times || 100;
for(var i = 0, l = times; i < l; i++){
start = Math.floor(this.length * Math.random());
deleteCount = Math.floor(Math.random() * (this.length - start)) + 1;
this.push.apply(this, this.splice(start, deleteCount));
}
};
var iFlag = false, iTimer, curWinner, template = "<table class=’details’><tbody><tr><td class=’bh’>{id}</td><td class=’bm’>{dep}</td><td class=’mz’>{name}</td></tr></tbody></table>";
function go(o){
//if(result.length == 6) return alert("抽奖结束");
if(iFlag){
o.value = "抽奖";
clearInterval(iTimer);
result.push(arr.shift());
curWinner = result[result.length-1];
toggle();
showResult(curWinner);
$("num").innerHTML = arr.length;
iFlag = false;
return;
}
o.value = "停止";
iTimer = setInterval(function(){
iFlag = true;
arr.shuffle(100);
toggle("show");
showMember(arr);
}, 20);
}
function showMember(arr){
$("first").innerHTML = process(arr[0], template);
$("second").innerHTML = process(arr[1], template);
$("third").innerHTML = process(arr[2], template);
$("fourth").innerHTML = process(arr[3], template);
$("fifth").innerHTML = process(arr[4], template);
}
function showResult(curWinner){
$("winner").innerHTML = process(curWinner, template);
}
function process(arr, template){
var config = {
id: arr[3],
dep: arr[2],
name: arr[0],
img: arr[1]
};
return memberInfo(template, config);
}
function memberInfo(str, config){
for(var name in config){
str = str.replace(new RegExp("{" + name + "}","g"), config[name]);
}
return str;
}
function toggle(type){
if(type == "show"){
$("winner").style.display = "none";
$("show").style.display = "block";
}else{
$("show").style.display = "none";
$("winner").style.display = "block";
}
}
/*window.onbeforeunload = function(e){
e = e || window.event;
if(result.length < 6)
e.returnValue = "抽奖还没结束，你确定要刷新页面?";
}*/
//-->
</script>
</body>
</html> |
