Simple voting system and JS brush ticket ideas and methods _javascript skills

Have long heard of what to brush the ticket script, micro-bo vote and so on the relevant votes have some people to brush the ticket.

Try it, maybe you can also brush the ticket? After a few hours of tinkering, I finally got something.

(1) Voting system

To brush the ticket, you have to have a voting interface first.

Of course, you can go directly to the various polling sites on the line, but here or make a vote on their own page, to facilitate their own.

The page is roughly as follows or view demo

Logically, the interface is very concise, but also basically have the basic function of voting.

The original rule is: You can only vote once, then the prompt succeeds, and then the button is unavailable.

Are original js,dom operation is not flexible can use this practice practicing. Of course, using JQ will be very convenient.

Html/css part

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

JS section

<script type= "Text/javascript" > Function getelemensbyclassname (className) {//get var Classarr = new Array via class
  (); var tags = document.getelementsbytagname ("*"); Get all nodes for (var item in tags) {if (Tags[item].nodetype = 1) {if (Tags[item].getattribute ("class") = = ClassName
{Classarr.push (Tags[item]);//Collect Class matching node}} return Classarr;
  function Delete_ff (Element) {//Remove child nodes in Firefox as empty elements var childs = Element.childnodes; for (Var i=0;i<childs.length;i++) {var =/\s/;//mode match, content is empty if (Childs[i].nodename = = "#text" &&
      Pattern.test (Childs[i].nodevalue)) {//Processing//alert (childs[i].nodename); Element.removechild (Childs[i]); Delete the empty node in FF}} window.onload = function () {var persons = Getelemensbyclassname ("person");//Alert (persons
  ); For (var item in persons) {//Traverse all person, bind voting event for them (function (_item) {//anonymous function incoming item, prevent the item from being the last one due to scope problems delete_f F (Persons[_item]); Go out FF Hollow line represents the child node 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 button to vote var obutton = childs[i];
        } if (Childs[i].nodename = = "P") {//Voting results update var OP = childs[i];
      var Ospan = Op.getelementsbytagname ("span") [0]; } if (Obutton!= null) {Obutton.onclick = function () {//event bound var num = ospan.innerhtml;//Get Ticket number O span.innerhtml = (++num); Number of votes updated//At this time we may need to send this ticket num to the server to save, and the update is also with the server num sync this.setattribute ("Disabled", "true");
    You can usually vote once. Alert ("Vote success, thank you for your support");
  }; }) (item);
Incoming individual Person}}; </script>

Comments should be more clear, a simple voting page.

(2) Brush ticket script implementation

Brush the ticket script, meaning is to achieve a vote by script, how to achieve the vote?

Through the code above we know that the general vote is to click "vote" so that the data is processed.

The front end has a ticket count num, the back end also has a ticket count num, they are synchronized, we do not have to ignore the back-end of NUM, because the front-end and back-end is synchronized.

When the Click event Triggers, JS will naturally sync the num well. We have to brush the ticket, in fact, is to trigger the Click event on the line.

Moreover, the voting system is someone else's page, we also have no right to modify, we can do, in fact, through JS simulation of the occurrence of events.

Well, then write your own script, how to use it?

The general use of console mode, such as the Firefox Chrome console, the script you write, it will parse the execution, processing the page data.

For example, here's the Firebug console, the left is the information display, the right can enter the JS code.

Or use the chrome console can also, in the inside input JS enter execution is good

If you have not used these items of child shoes can go to search the relevant knowledge.

Then write a simple script for the ticket.

First of all, we follow the normal way, assuming that the voting page is not written by us, how do we brush the ticket?

We must find out the key points of the vote.

Use the review element to find it, which is generally the voting button.

Click on that, and then move the mouse to the voting page button to try? Search the page for other tag information, such as ID class, etc., convenient to use.

OK, identify the relevant information, ID tag type, and so on.

Now, I want to give two the ticket, every two seconds to give him a vote. My aim is to keep two's total votes larger than three (of course, whatever you want)

So start writing code, get used to jquery, and use it directly in the console.

Or a bit of the old version does not support jquery, in the code inside add:

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 ');

Officially started

1. Write a general brush ticket function

function Brushvotes () {  //Brush ticket functions
var t = setinterval (function () {
 var three_num = $ ("#person3 >p>span"). Text (); Three number of votes
 var two_num  = $ ("#person2 >p>span"). Text ();  Two the number of votes
 console.info (two_num+ "" +three_num);
 
 if (Two_num-three_num < 5) {  //To keep the advantage of 5 votes leading
  $ ("#person2 >button"). Click (). attr ("disabled", false); Trigger the voting event click, after the vote remember to take the voting right back
 }
 if (two_num-three_num = = 5) {//5 votes lead this stop
  clearinterval (t);
 }
 
);
}

Use a timer to perform a polling event every two seconds. The lead is suspended after 5 votes.

2. Call the brush ticket function

Initial call once, click Run, the script is naturally executed.

Then listen to the change of three ticket number, make binding processing.

Normal change events can only be supported by those form-related tag elements. We can, of course, change the span of the votes into input tags to allow it to have onchange events.

But the page is someone else's, we can not change.

So find and find, and finally find ways to detect other changes such as Div span and other label content. If you want to get a deeper understanding of this approach welcome

Brushvotes (); Swipe ticket
$ ("#person3 >p>span"). Bind (' domnodeinserted ', function (e) {//three change triggers
 brushvotes ();/continue to swipe the ticket
});

As a result, the number of three votes changed, it will automatically trigger the continued to brush the ticket.

Full Script

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 (); Swipe ticket
$ ("#person3 >p>span"). Bind (' domnodeinserted ', function (e) {//three change triggers
 brushvotes ();/continue to swipe the ticket
});

function Brushvotes () {  //Brush ticket functions
var t = setinterval (function () {
 var three_num = $ ("#person3 >p>span "). text (); Three number of votes
 var two_num  = $ ("#person2 >p>span"). Text ();  Two the number of votes
 console.info (two_num+ "" +three_num);
 
 if (Two_num-three_num < 5) {  //To keep the advantage of 5 votes leading
  $ ("#person2 >button"). Click (). attr ("disabled", false); Trigger the voting event click, after the vote remember to take the voting right back
 }
 if (two_num-three_num = = 5) {//5 votes lead this stop
  clearinterval (t);
 }
 
);
}

Finally, simulate

1. Enter the voting page, bring up Firebug, type the complete code in the code input area to the right of the console

2. Then first click on the upper left corner of the operation, first let two from scratch to 5. 5 votes ahead of three.

It's been alert until 5 times.

3. Then, the simulation of someone to three cast a vote, click on the three button

4. Three the number of tickets detected has changed, two continue to brush the ticket

5. Finally, the brush to 6 and suspended

------------------------------------------------------------------------------------------------------

This is a simple brush ticket script implementation.

The main thing is to learn how to use your own scripts to manipulate other people's pages. Of course, this is not the same as the so-called scripting injection.

All we do is simulate the normal page events and manually trigger them.

Through this mechanism, not only the voting system can be used to brush the ticket, but also can be a violent verification login ah ... But encountered the verification code on the loss of big, can also be called train ticket grab ticket script ah. But that should involve more knowledge.