JavaScript点击投票效果代码实例

快乐打工仔发布于 2年前分类：实例代码

本章节分享一段代码实例，它实现了简单的投票效果功能。

当然在实际应用中，这样的效果还是不行的，因为刷新网页就可以再次投票。

通常需要使用cookie或者服务器段记录投票状态，不过咱们这里只是通过这么一段代码实例学习一下前端相关知识。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

我来回复

暂无回复内容