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 相关文章推荐
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
vue.js实例todoList项目
Jul 07 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
ES6中异步对象Promise用法详解
Jul 31 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中文本操作的类
2007/03/17 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
初学python数组的处理代码
2011/01/04 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python中的pack和unpack的使用
2018/03/12 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python 标准差计算的实现(std)
2019/07/29 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python基于opencv实现人脸识别
2021/01/04 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
C#公司笔试题
2014/03/28 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
意向协议书范本
2014/04/23 职场文书
2014年党支部学习材料
2014/05/19 职场文书
护士实习求职信
2014/06/22 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书