Ajax自己和酷车中国:投票系统

商厦要办车模大赛,需要投票系统。

职责分下来后,就考虑:1.假如有投票对象,就是如果参赛的车模

2.投票系统要力所能及重复使用,不要这次车格外赛后,投票系统就如高搁了。

3.设兑现比好的用户体验,和限时投票。决定就此jQuery+Ajax实现投票。

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

数据库设计小去

Js代码

 

 

Ajax 1Ajax 2代码

//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=’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/

 

相关文章