<!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">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<head>
<title>投票系統(tǒng) & js腳本簡單刷票</title>
<style type="text/css">

  *{padding: 0;margin: 0;}
  #wrap{margin: 0 auto; width:600px; text-align: center;}
  .person{position: relative; margin: 20px; float: left;}
  .person h4,
  .person p, 
  .person button{margin-bottom: 5px;}
  .person h4{color: blue;}
  .person span{color: red;}
  .person button:hover{cursor: pointer; font-weight: bold;}
  .clear{clear: both;}
</style>

</head>
<body>

<div id="wrap">
<h3>給你的小伙伴投上一票吧</h3>
  <div class="person">
    <h4>one</h4>
    <p>總票數(shù)： <span>0</span> 票</p>
    <button>給它投票</button>
  </div>
  <div class="person">
    <h4>two</h4>
    <p>總票數(shù)： <span>0</span> 票</p>
    <button>給它投票</button>
  </div>
  <div class="person">
    <h4>three</h4>
    <p>總票數(shù)： <span>0</span> 票</p>
    <button>給它投票</button>
  </div>
  <div class="person">
    <h4>four</h4>
    <p>總票數(shù)： <span>0</span> 票</p>
    <button>給它投票</button>
  </div>
  <div class="clear"></div>
</div>

js部分

<script type="text/javascript">
function getElemensByClassName(className){  // 通過class獲取
  var classArr = new Array();
  var tags = document.getElementsByTagName("*"); //獲取所有節(jié)點
  for(var item in tags){ 
    if(tags[item].nodeType == 1){ 
    if(tags[item].getAttribute("class") == className){ 
      classArr.push(tags[item]); //收集class匹配的節(jié)點
    }
  }
}
  return classArr;
}

function delete_FF(element){  // 在FireFox中刪除子節(jié)點為空的元素
  var childs = element.childNodes;
  for(var i=0;i<childs.length;i++){ 
    var pattern = /\s/; //模式匹配，內(nèi)容為空
    if(childs[i].nodeName == "#text" && pattern.test(childs[i].nodeValue)){  //處理
      //alert(childs[i].nodeName);
      element.removeChild(childs[i]); //刪除FF中獲取的空節(jié)點
    }
  }
}

window.onload = function(){ 
  var persons = getElemensByClassName("person");
//  alert(persons);
  for(var item in persons){  //遍歷所有person，為它們綁定投票事件
    (function(_item){    //匿名函數(shù)傳入item, 防止因作用域問題導(dǎo)致item總為最后一個
    delete_FF(persons[_item]); //出去FF中空行代表的子節(jié)點
    persons[_item].setAttribute("id","person"+(parseInt(_item)+1)); //賦上id

    var childs = persons[_item].childNodes;
    for(var i = 0;i<childs.length;i++){ 
      //alert(childs[i].nodeName);
      if(childs[i].nodeName == "BUTTON"){  //點擊按鈕投票
        var oButton = childs[i];
      }
      if(childs[i].nodeName == "P"){  //投票結(jié)果更新
        var oP = childs[i];
        var oSpan = oP.getElementsByTagName("span")[0];
      }
    }
    if(oButton != null){
    oButton.onclick = function(){  //事件綁定
      var num = oSpan.innerHTML; //獲取票數(shù)
      oSpan.innerHTML = (++num); //票數(shù)更新
                    // 這時一般我們可能就需要把這個票數(shù)num傳送給服務(wù)器保存，更新時也是和服務(wù)器中的num同步
      this.setAttribute("disabled","true"); // 一般只能投票一次的吧
      alert("投票成功，謝謝您的支持");
    };
  }
})(item); // 傳入各項person
  }
};
</script>

注釋應(yīng)該比較清晰了，一個簡單的投票頁面。

（2）刷票腳本實現(xiàn)

刷票腳本，意思就是通過腳本實現(xiàn)投票，怎么實現(xiàn)投票？

通過上面的代碼我們知道一般投票就是點擊“投票”，從而數(shù)據(jù)得到處理。

前端有一個票數(shù)統(tǒng)計num，后端也有一個票數(shù)統(tǒng)計num,它們是同步的，我們無需理會后端的num,因為前端和后端是同步的。

click事件觸發(fā)時候，js自然會將num同步好。我們要刷票，其實就是觸發(fā)click事件就行了。

而且，投票系統(tǒng)是別人的頁面，我們也無權(quán)修改，我們能做的，其實也就是通過js模擬事件的發(fā)生。

那自己寫好腳本了，該怎么用？

一般就是使用控制臺模式，比如FireFox Chrome的控制臺，把自己寫的腳本放進(jìn)去，它自會解析執(zhí)行，處理頁面數(shù)據(jù)。

比如這里的FireBug的控制臺里頭，左邊就是信息展示，右邊可以輸入js代碼。

或者用chrome的控制臺也可以，在里邊輸入js回車執(zhí)行就好

如果還沒使用過這些東西的童鞋可以去搜一下相關(guān)知識。

那就寫一個簡單的刷票腳本吧

首先，我們按照正規(guī)方式，假設(shè)投票頁面不是我們寫的，我們要怎么刷票？

我們必然要找出投票的關(guān)鍵點。

用審查元素找一下吧，一般就是那個投票按鈕。

點擊那個，然后把鼠標(biāo)移動到投票頁面的按鈕試試？在頁面中搜尋其他標(biāo)簽信息，比如id class等等，方便等會用到。

好，確定好相關(guān)信息，id 標(biāo)簽類型等等。

現(xiàn)在，我想給two刷票，每兩秒鐘就給他投一次。我的目的是讓two的總票數(shù)要保持大于three的（當(dāng)然，隨你怎么想）

那就開始寫代碼吧，習(xí)慣了jquery，在控制臺中也可以直接使用。

或者再舊版本一點的不支持jquery的話，就在代碼里邊加上：

javascript:(function(url) {
  var s = document.createElement('script');
  s.src = url;
  (document.getElementsByTagName('head')[0] ||
    document.getElementsByTagName('body')[0]).appendChild(s);
})('http://code.jquery.com/jquery-2.1.3.js');

正式開始

1.寫一個通用刷票函數(shù)

function brushVotes(){  //刷票函數(shù)
var t = setInterval(function(){
 var three_num = $("#person3>p>span").text(); //three票數(shù)
 var two_num  = $("#person2>p>span").text();  // two票數(shù)
 console.info(two_num+" "+three_num);
 
 if(two_num - three_num < 5){  //要保持領(lǐng)先5票的優(yōu)勢
  $("#person2>button").click().attr("disabled",false); //觸發(fā)投票的事件click,投完后記得把投票權(quán)限拿回來
 }
 if(two_num - three_num == 5){ //5票領(lǐng)先了就此打住
  clearInterval(t);
 }
 
},2000);
}

使用一個定時器，每兩秒執(zhí)行一次投票事件。領(lǐng)先5票后就暫停。

2.調(diào)用刷票函數(shù)

初始調(diào)用一次，點擊運行時，腳本自然就執(zhí)行了。

然后監(jiān)聽three票數(shù)的改變，作出綁定處理。

普通的change事件只有那些表單相關(guān)的標(biāo)簽元素才能支持的。我們當(dāng)然可以把票數(shù)中的span改為input標(biāo)簽，讓它擁有onchange事件。

但頁面是別人的，我們改不了。

所以找啊找，終于找到檢測其他諸如div span 等標(biāo)簽內(nèi)容改變的方法。如果想深入理解這種方法 welcome

brushVotes(); // 刷票
$("#person3>p>span").bind('DOMNodeInserted', function(e) { //three改變則 觸發(fā)
 brushVotes(); //繼續(xù)刷票
});

這樣一來，three票數(shù)改變了,就會自動觸發(fā)繼續(xù)刷票。

完整腳本

javascript:(function(url) {
  var s = document.createElement('script');
  s.src = url;
  (document.getElementsByTagName('head')[0] ||
    document.getElementsByTagName('body')[0]).appendChild(s);
})('http://code.jquery.com/jquery-2.1.3.js');


brushVotes(); // 刷票
$("#person3>p>span").bind('DOMNodeInserted', function(e) { //three改變則 觸發(fā)
 brushVotes(); //繼續(xù)刷票
});

function brushVotes(){  //刷票函數(shù)
var t = setInterval(function(){
 var three_num = $("#person3>p>span").text(); //three票數(shù)
 var two_num  = $("#person2>p>span").text();  // two票數(shù)
 console.info(two_num+" "+three_num);
 
 if(two_num - three_num < 5){  //要保持領(lǐng)先5票的優(yōu)勢
  $("#person2>button").click().attr("disabled",false); //觸發(fā)投票的事件click,投完后記得把投票權(quán)限拿回來
 }
 if(two_num - three_num == 5){ //5票領(lǐng)先了就此打住
  clearInterval(t);
 }
 
},2000);
}

最后，模擬一下

1.進(jìn)入投票頁面，調(diào)出Firebug,在控制臺右邊代碼輸入?yún)^(qū)鍵入完整代碼