suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Beispiele für das Schreiben von JS-Skripten und Abstimmungssystemen

Detaillierte Erläuterung der Beispiele für das Schreiben von JS-Skripten und Abstimmungssystemen

零下一度
零下一度Original
2017-06-28 13:26:052623Durchsuche

In diesem Artikel wird hauptsächlich das einfache, in js-Skript geschriebene Brush-Voting-System ausführlich vorgestellt, das einen gewissen Referenzwert hat.

Das Beispiel in diesem Artikel teilt das js-Brush-Voting-System mit allen . Der spezifische Code des Systems dient als Referenz. Der spezifische Inhalt lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>投票系统 & 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>

<p id="wrap">
<h3>给你的小伙伴投上一票吧</h3>
<p class="person">
<h4>one</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="person">
<h4>two</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="person">
<h4>three</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="person">
<h4>four</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="clear"></p>
</p>
</body>
<script type="text/javascript">
function getElemensByClassName(className) { // 通过class获取
var classArr = new Array();
var tags = document.getElementsByTagName("*"); //获取所有节点
console.log(tags[0].nodeType)
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)) { //处理
//alert(childs[i].nodeName);
element.removeChild(childs[i]); //删除FF中获取的空节点
}
}
}

window.onload = function() {
var persons = getElemensByClassName("person");
// alert(persons);
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); //票数更新
// 这时一般我们可能就需要把这个票数num传送给服务器保存，更新时也是和服务器中的num同步
this.setAttribute("disabled", "true"); // 一般只能投票一次的吧
alert("投票成功，谢谢您的支持");
};
}
})(item); // 传入各项person
}
javascript:(function(url) {
var s = document.createElement(&#39;script&#39;);
s.src = url;
(document.getElementsByTagName(&#39;head&#39;)[0] ||
document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(s);
})(&#39;http://code.jquery.com/jquery-2.1.3.js&#39;);


brushVotes(); // 刷票
$("#person3>p>span").bind(&#39;DOMNodeInserted&#39;, function(e) { //three改变则 触发
brushVotes(); //继续刷票
});

function brushVotes(){ //刷票函数
var t = setInterval(function(){
var three_num = $("#person3>p>span").text(); //three票数
var two_num = $("#person2>p>span").text(); // two票数
console.info(two_num+" "+three_num);

if(two_num - three_num < 5){ //要保持领先5票的优势
$("#person2>button").click().attr("disabled",false); //触发投票的事件click,投完后记得把投票权限拿回来
}
if(two_num - three_num == 5){ //5票领先了就此打住
clearInterval(t);
}
},2000);
}
};
</script>
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für das Schreiben von JS-Skripten und Abstimmungssystemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：WeChat implementiert Skin-Funktionen (Nachtmodus)_Javascript-FähigkeitenNächster Artikel：WeChat implementiert Skin-Funktionen (Nachtmodus)_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen