Home > Developer > JavaScript
Simple Vote System & js script ticket flushing and Voting System
<! 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> Vote System & js script simple ticket swiping </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> vote for your friends <Div class = "person">
<H4> one <P> total votes: <span> 0 </span> votes </p>
<Button> vote for it </button>
</Div>
<Div class = "person">
<H4> two <P> total votes: <span> 0 </span> votes </p>
<Button> vote for it </button>
</Div>
<Div class = "person">
<H4> three <P> total votes: <span> 0 </span> votes </p>
<Button> vote for it </button>
</Div>
<Div class = "person">
<H4> four <P> total votes: <span> 0 </span> votes </p>
<Button> vote for it </button>
</Div>
<Div class = "clear"> </div>
</Div>
</Body>
<Script type = "text/javascript">
Function getElemensByClassName (className) {// obtain it through class
Var classArr = new Array ();
Var tags = document. getElementsByTagName ("*"); // get all nodes
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]); // collects nodes matching the class.
}
}
}
Return classArr;
}
Function delete_FF (element) {// delete an element with a child node empty in FireFox
Var childs = element. childNodes;
For (var I = 0; I <childs. length; I ++ ){
Var pattern =/\ s/; // pattern match. The content is empty.
If (childs [I]. nodeName = "# text" & pattern. test (childs [I]. nodeValue) {// Process
// Alert (childs [I]. nodeName );
Element. removeChild (childs [I]); // Delete the empty node obtained from FF
}
}
}
Window. onload = function (){
Var persons = getElemensByClassName ("person ");
// Alert (persons );
For (var item in persons) {// traverses all persons and binds them to voting events
(Function (_ item) {// The anonymous function transmits the item to prevent the item from being always the last
Delete_FF (persons [_ item]); // The child node represented by the out FF hollow row
Persons [_ item]. setAttribute ("id", "person" + (parseInt (_ item) + 1); // assign id
Var childs = persons [_ item]. childNodes;
For (var I = 0; I <childs. length; I ++ ){
// Alert (childs [I]. nodeName );
If (childs [I]. nodeName = "BUTTON") {// click the BUTTON to vote
Var oButton = childs [I];
}
If (childs [I]. nodeName = "P") {// the voting result is updated.
Var oP = childs [I];
Var oSpan = oP. getElementsByTagName ("span") [0];
}
}
If (oButton! = Null ){
OButton. onclick = function () {// event binding
Var num = oSpan. innerHTML; // obtain the number of votes
OSpan. innerHTML = (++ num); // Number of votes updated
// In this case, we may need to send the Count num to the server for storage. The update is also synchronized with the num in the server.
This. setAttribute ("disabled", "true"); // Generally, only one vote is allowed.
Alert ("Vote successful, thank you for your support ");
};
}
}) (Item); // enter the person
}
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 (); // ticket swiping
$ ("# Person3> p> span"). bind ('domnodeinserted', function (e) {// trigger when three changes
BrushVotes (); // continue ticket Flushing
});
Function brushVotes () {// ticket flushing function
Var t = setInterval (function (){
Var three_num = $ ("# person3> p> span"). text (); // number of three votes
Var two_num = $ ("# person2> p> span"). text (); // two votes
Console.info (two_num + "" + three_num );
If (two_num-three_num <5) {// keep the advantage of 5 votes ahead
$ ("# Person2> button"). click (). attr ("disabled", false); // click the event that triggers the voting. After the voting is completed, remember to get the voting permission back.
}
If (two_num-three_num = 5) {// 5 votes lead, stop here
ClearInterval (t );
}
},2000 );
}
};
Author: 1-17
Source: http://www.cnblogs.com/yiyi17/
About Author: Focus on HTML5 and front-end!
The copyright of this article is shared by the author and the blog Park, you are welcome to reprint, but this paragraph of the statement must be kept without the author's consent, and given in the obvious position of the article page, the original link if there is a problem, can mail (bllbl_2013@aliyun.com) consultation.
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
