JavaScript點選投票效果程式碼例項

admin發表於2017-04-05
JavaScript

本章節分享一段程式碼例項，它實現了簡單的投票效果功能。

當然在實際應用中，這樣的效果還是不行的，因為重新整理網頁就可以再次投票。

通常需要使用cookie或者伺服器段記錄投票狀態，不過我們們這裡只是通過這麼一段程式碼例項學習一下前端相關知識。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>
<script type="text/javascript">
function getElemensByClassName(className){  // 通過class獲取
  var classArr = new Array();
  var tags = document.getElementsByTagName("*"); //獲取所有節點
  for(var item in tags){ 
    if(tags[item].nodeType == 1){ 
      if(tags[item].getAttribute("class") == className){ 
        classArr.push(tags[item]); //收集class匹配的節點
      }
    }
  }
  return classArr;
}
  
function delete_FF(element){  // 在FireFox中刪除子節點為空的元素
  var childs = element.childNodes;
  for(var i=0;i<childs.length;i++){ 
    var pattern = /\s/; //模式匹配，內容為空
    if (childs[i].nodeName == "#text" && pattern.test(childs[i].nodeValue)) {  //處理
      element.removeChild(childs[i]); //刪除FF中獲取的空節點
    }
  }
}
  
window.onload = function(){ 
  var persons = getElemensByClassName("person");
  for(var item in persons){  //遍歷所有person，為它們繫結投票事件
    (function(_item){    //匿名函式傳入item, 防止因作用域問題導致item總為最後一個
      delete_FF(persons[_item]); //出去FF中空行代表的子節點
      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"){  //投票結果更新
          var oP = childs[i];
          var oSpan = oP.getElementsByTagName("span")[0];
        }
      }
      if(oButton != null){
        oButton.onclick = function(){//事件繫結
          var num = oSpan.innerHTML; //獲取票數
          oSpan.innerHTML = (++num); //票數更新
          this.setAttribute("disabled","true"); // 一般只能投票一次的吧
          alert("投票成功，謝謝您的支援");
        };
      }
    })(item); // 傳入各項person
  }
};
</script>
</head>
<body>
<div id="wrap">  
  <div class="person">     
    <h4>螞蟻部落</h4>
    <p>總票數：<span>0</span> 票</p>
    <button>給它投票</button>
  </div>
   
  <div class="person">     
    <h4>css教程</h4>
    <p>總票數：<span>0</span> 票</p>
    <button>給它投票</button>
  </div>
   
  <div class="person">     
    <h4>div教程</h4>
    <p>總票數：<span>0</span> 票</p>
    <button>給它投票</button>
  </div>
   
  <div class="person">     
    <h4>json教程</h4>
    <p>總票數：<span>0</span> 票</p>
    <button>給它投票</button>
  </div>
  <div class="clear"></div>
</div>
</body>
</HTML>

相關文章