我与酷车中国：投票系统

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

任务分下来后，就考虑：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/

 

转载于:https://www.cnblogs.com/zhuyue/archive/2010/07/11/1775289.html