js脚本编写简单刷票投票系统


Posted in Javascript onJune 27, 2017

本文实例为大家分享了js刷票投票系统的具体代码,供大家参考,具体内容如下

<!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>
</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('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);
}
};


</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 #Javascript
详解vue.js的事件处理器v-on:click
Jun 27 #Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 #Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 #Javascript
js获取地址栏参数的两种方法
Jun 27 #Javascript
React组件之间的通信的实例代码
Jun 27 #Javascript
JS实现图片预览的两种方式
Jun 27 #Javascript
You might like
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python实现的knn算法示例
2018/06/14 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python实现同一局域网下传输图片
2020/03/20 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
企业管理标语
2014/06/10 职场文书
出纳岗位职责范本
2015/03/31 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
银行求职信怎么写
2019/06/20 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server