我与酷车中国：投票系统

公司要办车模大赛，需要投票系统。

任务分下来后，就考虑：1.要有投票对象，就是要参赛的车模

2.投票系统要能重复使用，不要这次车大赛后，投票系统就要高搁了。

3.要实现较好的用户体验，和限时投票。决定用jQuery+Ajax实现投票。

功能设计：活动+参赛者+评论+投票+参赛相册展示

数据库设计略去

Js代码

 

 

//loading
function loading(){
    var width = 60,height = 60;
    $("body").append("<div id='loading_box' style='width:" + width + "px;height:" + height + "px; line-height:" + height + "px;align:center; position:absolute; border:solid 1px #ccc; vertical-align:middle; padding-top:6px; background-color:White;'><img src='/images/loader.gif' ></div>");
    setCenter('loading_box',width,height)

}
function updateLoading(message){
    var box = $("#loading_box");
    if(arguments.length == 3){//参数有三个，后两个为宽和高
        setCenter('loading_box',arguments[1],arguments[2])
        box.css({width:arguments[1]+"px",height:arguments[2]+"px"});
    }
    box.html(message);
    //关闭窗口
        box.fadeOut(1000,function(){
           $(this).remove();
         });
}
//设置居中
function setCenter(box,width,height){
    var _version = $.browser.version;
    var    cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop; 
    if ( _version == 6.0 ) {
        $("#" + box).css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
    }else {
        $("#" + box).css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
    };
}

function Vote(id,t){
   
    var voteTime = Cookies.get("vote_" + id);
    if(voteTime != ''){
        var voteDate = new Date(voteTime);
        var curDate = new Date();
　　　　//此外设计的意思是，投一次票后，5分钟后可以再次投票
        var d = voteDate.getTime() -curDate.getTime()  + 5*60*1000;
         if(d > 0)
         {
            var m = Math.floor(d/60000); 
            var s = Math.floor((d-m*60000)/1000); 
            alert("该选手您已经投过票了，稍等" + m + "分" + s + "秒" + "后您可以再次投票！");
         }
        else
        {
            //投票
            ajaxVote(id);
        }

    }else{
        //第一次投票
        ajaxVote(id);
    }
}
 function ajaxVote(id,t){
      loading();
      //ajax提交数据
      $.post("/Tools/Ajax.aspx", { type: "vote", id: id,vt:t },
      function(data){
        if(data == "0"){
           updateLoading("系统出错，请稍后再试",280,60);
        }else{
           updateLoading("恭喜您，投票成功。五分钟后可再次投票 ^-^",280,60);
           Cookies.set("vote_" + id,new Date());
           //更新投票个数
           var v =  $("#lab_Vote_" + data);
          if(v.text() == ""){
                v.text("1");
          }else{
                v.text(Math.floor(v.text()) + 1);
          }
        }
      });
 }

 详细请见http://www.kuchechina.com/zhuanti/wdml/