Tags:javascript xml 随机抽奖
以下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 onfocus="this.blur();" 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>
以下是test.xml源代码：
<?xml version="1.0" encoding="utf-8" ?>
<info>
<member>
<name>汪杰</name>
<id>001</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>肖义红</name>
<id>002</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>王婷婷</name>
<id>003</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>郭靖</name>
<id>004</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>韩启明</name>
<id>005</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>陈燕</name>
<id>006</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>黄健挺</name>
<id>006</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>胡立奇</name>
<id>007</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
<name>吴佳坤</name>
<id>008</id>
<department>研发部</department>
<img>http://bbs.51js.com/images/default/logo.gif</img>
</member>
<member>
</info>
转载请注明出处-零柒动力-07er.com |
