javascript学习指南_javascript中ajax简单投票示例(js版本)

时间:2019-05-09  来源:js教程  阅读:

注意:我只是简单的用了Cookie来防止重复投票,肯定可以作弊了,最保险的还是登录投票。

 

 代码如下





Silverlight" />
聚会活动方案投票

<script type="text/javascript">

var ajax;
var msg;
var voting;

function init()
{
 msg =  document.getElementById("msg");
 voting = false;
 ajaxSendRequest("do.php?n=-1", onUpdateData);
}

function createAjax(){
 if(window.ActiveXObject){
  try{
   return new ActiveXObject("MSXML2.XMLHTTP");
  }
  catch(e){
   try{
    return new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch(e2){
    return null;
   }
  }
 } //www.111cn.net
 else if(window.XMLHttpRequest){
  return new XMLHttpRequest;
 }
 else{
  return null;
 }
}

function onUpdateData(){
 if(ajax.readyState==4){
  if(ajax.status==200){
   var text = ajax.responseText;
   updateUI(text);
  }
  else{
   alert("服务器处理错误");
  }
 }
}

function ajaxSendRequest(uri, handler){
 ajax = createAjax();
 if(!ajax){
  alert("使用不兼容XMLHttpRequest的浏览器");
  return 0;
 }
 
 ajax.onreadystatechange = handler;
 ajax.open("GET",uri,true);
 ajax.send(null);
}

function checkForm(){
 voting = true;
 var options = document.getElementsByName("option");
 var voted = getCookie("voted") ? getCookie("voted") : false;
 var num = -1;
 for(var i = 0 ; i < options.length ; i++)
 {
  var option = options[i];
  if(option.checked)
  {
   num = option.value;
  }
 }
 if(num == -1)
 {
  msg.innerHTML = "请点击选择!";
  clearInfo();
 }
 else
 {
  if(!voted)
  {
   msg.innerHTML = "";
   var today = new Date();
   url = "do.php?n=" + num + "&time=" + today.getTime();
   ajaxSendRequest(url, onUpdateData);
  }
  else
  {
   msg.innerHTML = "请不要重复投票!";
   clearInfo();
  }
 }
 return false;
}

function updateUI(text)
{
 var counts = text.split(":");
 var sum = getSum(counts);
 var ems = document.getElementsByTagName("em");
 for(var i = 0 ; i < counts.length; i++)
 {
  var count = counts[i];
  var pb = document.getElementById("pb_" + i);
  var perscent = isNaN(count) ? "" : (count/sum * 100).toFixed(2) + "%";
  pb.style.width = perscent;
  var percentTd = document.getElementById("percent_" + i.toString());
  percentTd.innerHTML =  "(" + perscent + ")";
  var countEm = ems[i];
  countEm.style.color = pb.style.backgroundColor;
  countEm.innerHTML =  count.toString();
 }
 if(voting)
 {
  setCookie("voted", true);
  msg.innerHTML = "投票成功!感谢你的参与!";
  clearInfo();
 }
}

function getSum(counts)
{
 var sum = 0;
 for(var j = 0 ; j < counts.length ; j++)
 {
  var count =  parseInt(counts[j]);
  sum += count;
 }
 return sum;
}

function clearInfo()
{
 setTimeout(function(){
  msg.innerHTML = "";
 },2000);
}

function setCookie(name,value)
{
    var days = 30;
    var exp  = new Date();
    exp.setTime(exp.getTime() + days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name)    
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}

function clearCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}


</script>



   
       

十周年毕业同学聚会活动方案投票


       

请选择:


   
   
       
           
             
             
           
           
               
                   
                       
                   
               
               
               
               
           
           
               
               
           
           
               
                   
                       
                   
               
               
               
               
           
           
               
               
           
           
               
                   
                       
                   
               
               
               
               
           
           
               
               
           
           
               
                   
                       
                   
               
               
               
               
           
           
               
               
           
           
               
                   
                       
                   
               
               
               
               
           
       
   
   
     
   
   
    
   
   
   

   

javascript学习指南_javascript中ajax简单投票示例(js版本)

http://m.bbyears.com/wangyezhizuo/50133.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新