详解js脚本编写刷票投票系统实例
这篇文章主要为大家详细介绍了js脚本编写简单刷票投票系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js刷票投票系统的具体代码，供大家参考，具体内容如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>
<p id="wrap">
<h3>给你的小伙伴投上一票吧</h3>
<p class="person">
<h4>one</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="person">
<h4>two</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="person">
<h4>three</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="person">
<h4>four</h4>
<p>总票数： <span>0</span> 票</p>
<button>给它投票</button>
</p>
<p class="clear"></p>
</p>
</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>以上是详解js脚本编写刷票投票系统实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
CUDA之通用矩阵乘法：从入门到熟练！
Mar 25, 2024 pm 12:30 PM
通用矩阵乘法（GeneralMatrixMultiplication，GEMM）是许多应用程序和算法中至关重要的一部分，也是评估计算机硬件性能的重要指标之一。通过深入研究和优化GEMM的实现，可以帮助我们更好地理解高性能计算以及软硬件系统之间的关系。在计算机科学中，对GEMM进行有效的优化可以提高计算速度并节省资源，这对于提高计算机系统的整体性能至关重要。深入了解GEMM的工作原理和优化方法，有助于我们更好地利用现代计算硬件的潜力，并为各种复杂计算任务提供更高效的解决方案。通过对GEMM性能的优
华为干昆 ADS3.0 智驾系统 8 月上市 享界 S9 首发搭载
Jul 30, 2024 pm 02:17 PM
7月29日，在AITO问界第四十万台新车下线仪式上，华为常务董事、终端BG董事长、智能汽车解决方案BU董事长余承东出席发表演讲并宣布，问界系列车型将于今年8月迎来华为干昆ADS3.0版本的上市，并计划在8月至9月间陆续推送升级。 8月6日即将发布的享界S9将首发华为ADS3.0智能驾驶系统。华为干昆ADS3.0版本在激光雷达的辅助下，将大幅提升智驾能力，具备融合端到端的能力，并采用GOD(通用障碍物识别)/PDP(预测决策规控)全新端到端架构，提供车位到车位智驾领航NCA功能，并升级CAS3.0全
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
苹果16系统哪个版本最好
Mar 08, 2024 pm 05:16 PM
苹果16系统中版本最好的是iOS16.1.4，iOS16系统的最佳版本可能因人而异添加和日常使用体验的提升也受到了很多用户的好评。苹果16系统哪个版本最好答：iOS16.1.4iOS16系统的最佳版本可能因人而异。根据公开的消息，2022年推出的iOS16被认为是一个非常稳定且性能优越的版本，用户对其整体体验也相当满意。此外，iOS16中新功能的添加和日常使用体验的提升也受到了很多用户的好评。特别是在更新后的电池续航能力、信号表现和发热控制方面，用户的反馈都比较积极。然而，考虑到iPhone14
常用常新！华为Mate60系列升级HarmonyOS 4.2：AI云增强、小艺方言太好用了
Jun 02, 2024 pm 02:58 PM
4月11日，华为官方首次宣布HarmonyOS4.2百机升级计划，此次共有180余款设备参与升级，品类覆盖手机、平板、手表、耳机、智慧屏等设备。过去一个月，随着HarmonyOS4.2百机升级计划的稳步推进，包括华为Pocket2、华为MateX5系列、nova12系列、华为Pura系列等多款热门机型也已纷纷展开升级适配，这意味着会有更多华为机型用户享受到HarmonyOS带来的常用常新体验。从用户反馈来看，华为Mate60系列机型在升级HarmonyOS4.2之后，体验全方位跃升。尤其是华为M
Oracle数据库中修改系统日期方法详解
Mar 09, 2024 am 10:21 AM
Oracle数据库中修改系统日期方法详解在Oracle数据库中，修改系统日期的方法主要涉及到修改NLS_DATE_FORMAT参数和使用SYSDATE函数。本文将详细介绍这两种方法及其具体的代码示例，帮助读者更好地理解和掌握在Oracle数据库中修改系统日期的操作。一、修改NLS_DATE_FORMAT参数方法NLS_DATE_FORMAT是Oracle数据
Linux和Windows系统中cmd命令的区别与相似之处
Mar 15, 2024 am 08:12 AM
Linux和Windows是两种常见的操作系统，分别代表了开源的Linux系统和商业的Windows系统。在这两种操作系统中，都存在着命令行界面，用于用户与操作系统进行交互。在Linux系统中，用户使用的是Shell命令行，而在Windows系统中，用户使用的是cmd命令行。Linux系统中的Shell命令行是一个非常强大的工具，可以完成几乎所有的系统管理任
华为将在智能穿戴领域推出玄玑感知系统 可根据心率评估用户情绪状态
Aug 29, 2024 pm 03:30 PM
近日，华为宣布将于9月推出一款搭载玄玑感知系统的全新智能穿戴新品，预计为华为的最新智能手表。该新品将集成先进的情绪健康监测功能，玄玑感知系统以其六大特性——准确性、全面性、快速性、灵活性、开放性和延展性——为用户提供全方位的健康评估。系统采用超感知模组，优化了多通道光路架构技术，大幅提升了心率、血氧和呼吸率等基础指标的监测精度。此外，玄玑感知系统还拓展了基于心率数据的情绪状态研究，不仅限于生理指标，还能评估用户的情绪状态和压力水平，支持超过60项运动健康指标监测，涵盖心血管、呼吸、神经、内分泌、
