javascript中ajax簡單投票樣本(js版本)

來源:互聯網
上載者:User

注意:我只是簡單的用了Cookie來防止重複投票,肯定可以作弊了,最保險的還是登入投票。

 

 代碼如下 複製代碼

<!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=utf-8" />
<meta http-equiv="keywords" content="Flash,Flex,AIR,Ajax,Html5,Silverlight" />
<title>聚會活動方案投票</title>
<style>
body{
 margin:0px;
 font-size:12px;
}

#header {
 padding-top:5px;
 padding-left:10px;
}
.pbg{
 background-color:#EEE;
}

.pbr{
 height:8px;
}

li{
 list-style-type: none;
}
hr {
 border: 0px;
 color: #CCCCCC;
 background-color: #CDCDCD;
 height: 1px;
 width: 100%;
}

h2 {
 color: #CC0000;
 text-align:center;
}
h3 {
 color: #999999;
 text-align: left;
 font-weight: 300;
 padding: 5px;
 margin-top: 5px;
}

#main{
 padding-left:10px;
 padding-bottom:10px;
}

#detail {
 padding:10px;
}

#detail div {
 padding-left:5px;
}
p {
 line-height: 14px;
}
a {
 color: #CC0000;
 background-color: #FFFFFF;
 text-decoration: none;
}
a:hover {
 color: #cc0000;
 background-color: #FFFFFF;
 text-decoration: underline;
}
#footer {
 text-align:center;
}
.info{
 padding-left:6px;
 position:relative;
}
#msg{
 padding-left:30px;
 color:#990000;
}

</style>
<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>

</head>
<body onload="init();">
    <div id="header">
        <h2>十周年畢業同學聚會活動方案投票</h2>
        <h3>請選擇:</h3>
    </div>
    <div id="main">
        <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td width="24" rowspan="2"><input type="radio" name="option" id="option_0" value="0"/></td>
              <td colspan="4"><label for="option_0">1. 10年聚成都之旅(2天)</label></td>
            </tr>
            <tr>
                <td>
                    <div class="pbg">
                        <div id="pb_0" class="pbr" style="background-color:#990000;"></div>
                    </div>
                </td>
                <td width="20"></td>
                <td id="percent_0" width="65"></td>
                <td width="120"><em></em></td>
            </tr>
            <tr>
                <td rowspan="2"><input type="radio" name="option" id="option_1" value="0"/></td>
                <td colspan="4"><label for="option_1">2. 10年聚都江堰之旅(2天)</label></td>
            </tr>
            <tr>
                <td>
                    <div class="pbg">
                        <div id="pb_1" class="pbr" style="background-color:#000099;"></div>
                    </div>
                </td>
                <td></td>
                <td id="percent_1"></td>
                <td><em></em></td>
            </tr>
            <tr>
                <td rowspan="2"><input type="radio" name="option" id="option_2" value="0"/></td>
                <td><label for="option_2">3. 10年聚瓦屋山之旅(3天)</label></td>
            </tr>
            <tr>
                <td>
                    <div class="pbg">
                        <div id="pb_2" class="pbr" style="background-color:#009900;"></div>
                    </div>
                </td>
                <td></td>
                <td id="percent_2"></td>
                <td><em></em></td>
            </tr>
            <tr>
                <td rowspan="2"><input type="radio" name="option" id="option_3" value="0"/></td>
                <td><label for="option_3">4. 10年聚萬縣之旅(3天)</label></td>
            </tr>
            <tr>
                <td>
                    <div class="pbg">
                        <div id="pb_3" class="pbr" style="background-color:#999900;"></div>
                    </div>
                </td>
                <td></td>
                <td id="percent_3"></td>
                <td><em></em></td>
            </tr>
            <tr>
                <td rowspan="2"><input type="radio" name="option" id="option_4" value="0"/></td>
                <td><label for="option_4">5. 10年聚-萬縣直達懷舊之旅(3天)</label></td>
            </tr>
            <tr>
                <td>
                    <div class="pbg">
                        <div id="pb_4" class="pbr" style="background-color:#009999;"></div>
                    </div>
                </td>
                <td></td>
                <td id="percent_4"></td>
                <td><em></em></td>
            </tr>
        </table>
    </div>
    <div align="center">
     <input type="button" value="我要投票" onclick="checkForm();"/>
    </div>
    <span id="msg"></span>
    
    </div>
    <div id="footer">
    <hr />
    </div>
</body>
</html>

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。