간단한 투표 시스템과 js 투표 브러싱 아이디어 및 방법_javascript 기술
- WBOY원래의
- 2016-05-16 16:05:131699검색
웨이보 투표 및 기타 관련 설문조사에서 투표 스크립트를 사용하여 투표하는 스크립트가 있다는 이야기를 오랫동안 들어왔습니다.
한번 해보세요. 스와이프 투표도 가능할까요? 몇 시간 동안 고민한 끝에 마침내 뭔가를 얻었습니다.
(1) 투표 시스템
투표하려면 먼저 투표 인터페이스가 있어야 합니다.
물론 다양한 투표 사이트로 바로 이동할 수도 있지만, 편의를 위해 이곳에서 나만의 투표 페이지를 만드는 것이 더 좋습니다.
페이지는 대략 다음과 같습니다. 또는 데모 보기
일반적으로 인터페이스는 매우 간단하지만 기본적으로 투표라는 기본 기능도 갖추고 있습니다.
원래 규칙은 한 번만 투표할 수 있으며, 그 후에는 성공 메시지가 표시되고 그 다음에는 버튼을 사용할 수 없다는 것입니다.
모두 네이티브 JS이므로 DOM 작업에 유연성이 없는 사람들도 이를 활용하여 기술을 연습할 수 있습니다. 물론 jq를 사용하면 매우 편리할 것이다.
html/css 부분
<!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>投票系统 & 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>
<div id="wrap">
<h3>给你的小伙伴投上一票吧</h3>
<div class="person">
<h4>one</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</div>
<div class="person">
<h4>two</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</div>
<div class="person">
<h4>three</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</div>
<div class="person">
<h4>four</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</div>
<div class="clear"></div>
</div>
js 부분
<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)){ //处理
//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
}
};
</script>
댓글은 간단한 투표 페이지로 더욱 명확해야 합니다.
(2) 티켓 브러싱 스크립트 구현
투표 브러싱 스크립트는 투표가 스크립트를 통해 구현된다는 의미입니다. 투표는 어떻게 이루어지나요?
위 코드를 보면 일반 투표는 "Vote"를 클릭하여 데이터를 처리하는 것임을 알 수 있습니다.
프런트엔드에는 투표 통계 번호가 있고, 백엔드에도 투표 통계 번호가 동기화되어 있습니다. 끝이 동기화됩니다.
클릭 이벤트가 발생하면 js는 자연스럽게 num을 동기화합니다. 티켓을 스와이프하려면 클릭 이벤트만 트리거하면 됩니다.
게다가 투표 시스템은 다른 사람의 페이지이므로 수정할 권리가 없습니다. 실제로 우리가 할 수 있는 일은 js를 통해 이벤트 발생을 시뮬레이션하는 것뿐입니다.
이제 스크립트를 작성했으니 어떻게 사용해야 할까요?
보통 FireFox Chrome 콘솔과 같은 콘솔 모드를 사용하고 여기에 자신만의 스크립트를 넣으면 이를 구문 분석하고 실행하며 페이지 데이터를 처리합니다.
예를 들어 여기 FireBug 콘솔에서는 왼쪽에 정보가 표시되고 오른쪽에 js 코드를 입력할 수 있습니다.
또는 Chrome 콘솔을 사용할 수도 있습니다. js를 입력하고 Enter를 눌러 실행하세요.
아동 신발에 이런 것들을 사용해 본 적이 없다면 관련 지식을 검색해 보세요.
그런 다음 간단한 티켓 브러싱 스크립트를 작성하세요
우선 투표 페이지는 저희가 직접 작성한 것이 아니라는 가정 하에 형식적인 방법을 따르는데, 투표를 어떻게 브러싱하나요?
투표의 핵심 포인트를 꼭 알아내야 합니다.
검토 요소(보통 투표 버튼)를 사용하여 찾으세요.
클릭한 후 투표 페이지의 버튼에 마우스를 올려보세요. 나중에 사용할 id 클래스 등의 다른 태그 정보를 페이지에서 검색합니다.
알겠습니다. 관련 정보, ID 태그 유형 등을 결정하세요.
이제 2초마다 두 명에게 투표하고 싶어요. 내 목표는 3보다 큰 2개의 투표 수를 유지하는 것입니다(물론 어떻게 생각하시든)
그런 다음 jquery에 익숙하다면 콘솔에서 직접 사용할 수도 있습니다.
또는 이전 버전이 jquery를 지원하지 않는 경우 코드에
를 추가하세요.
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');
공식 개시
1. 일반 티켓 브러싱 기능 작성
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);
}
타이머를 사용하여 2초마다 투표 이벤트를 실행합니다. 5표 차이로 앞서면 중단됩니다.
2. 티켓 브러싱 기능 호출
초기 호출은 1회이며, Run을 클릭하면 자연스럽게 스크립트가 실행됩니다.
그런 다음 세 투표의 변화를 모니터링하고 바인딩 처리를 수행합니다.
일반적인 변경 이벤트는 해당 양식 관련 태그 요소에서만 지원될 수 있습니다. 물론 투표 범위를 입력 태그로 변경하고 onchange 이벤트를 갖도록 할 수 있습니다.
하지만 해당 페이지는 다른 사람의 소유이므로 변경할 수 없습니다.
그래서 찾아보고 찾아보다가 마침내 div 스팬 등 다른 태그에서도 콘텐츠 변경을 감지할 수 있는 방법을 찾았습니다. 이 방법을 더 깊이 이해하고 싶다면 환영합니다
brushVotes(); // 刷票
$("#person3>p>span").bind('DOMNodeInserted', function(e) { //three改变则 触发
brushVotes(); //继续刷票
});
이렇게 3개의 투표 수가 변경되면 자동으로 투표를 계속하도록 실행됩니다.
전체 스크립트
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(); // 刷票
$("#person3>p>span").bind('DOMNodeInserted', 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);
}
마지막으로 시뮬레이션
1. 투표 페이지에 들어가서 Firebug를 호출하고 콘솔 오른쪽의 코드 입력 영역에 전체 코드를 입력하세요
2. 먼저 왼쪽 상단의 실행을 클릭하고 2가 0부터 5까지 시작하도록 합니다. 3보다 5표 앞서 있습니다.
5회까지 알림
3. 그런데 누군가 3인 투표를 시뮬레이션하고 3인 버튼을 눌렀습니다
4. 3명의 투표수가 바뀌고 2명의 투표가 계속되는 것으로 감지됩니다
5. 결국 6표를 얻은 뒤 다시 정지됐습니다
---------------------------------- --- ---------------------------------- --- -----
간단한 티켓 브러싱 스크립트 구현입니다.
이를 통해 가장 중요한 것은 자신의 스크립트를 사용하여 다른 사람의 페이지를 운영하는 방법을 배우는 것입니다. 물론 이는 소위 스크립트 인젝션과 같은 것이 아닙니다..
우리가 하는 일은 일반 페이지 이벤트를 시뮬레이션하고 수동으로 실행하는 것뿐입니다.
이 메커니즘을 통해 투표 시스템에서 투표를 할 수 있을 뿐만 아니라 폭력적인 인증 및 로그인도 수행할 수 있습니다... 하지만 인증 코드를 만나면 많은 손실을 입게 됩니다. 소위 기차표를 사용할 수도 있습니다. 스크립트를 잡는 중... 하지만 그건 더 많은 지식이 필요합니다.