javascript+xml制作的随机抽奖程序源代码

作者:网络 来源:佚名 更新时间:2008-09-16 14:37:57 点击:

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> 

商业源码热门下载www.html.org.cn