Detailed explanation of JS script writing and voting system examples
This article mainly introduces the simple brush voting system written in js script in detail. It has certain reference value. Interested friends can refer to it.
The example in this article shares with everyone the js brush voting system. The specific code of the system is for your reference. The specific content is as follows
<!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>The above is the detailed content of Detailed explanation of JS script writing and voting system examples. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
CUDA's universal matrix multiplication: from entry to proficiency!
Mar 25, 2024 pm 12:30 PM
General Matrix Multiplication (GEMM) is a vital part of many applications and algorithms, and is also one of the important indicators for evaluating computer hardware performance. In-depth research and optimization of the implementation of GEMM can help us better understand high-performance computing and the relationship between software and hardware systems. In computer science, effective optimization of GEMM can increase computing speed and save resources, which is crucial to improving the overall performance of a computer system. An in-depth understanding of the working principle and optimization method of GEMM will help us better utilize the potential of modern computing hardware and provide more efficient solutions for various complex computing tasks. By optimizing the performance of GEMM
Huawei's Qiankun ADS3.0 intelligent driving system will be launched in August and will be launched on Xiangjie S9 for the first time
Jul 30, 2024 pm 02:17 PM
On July 29, at the roll-off ceremony of AITO Wenjie's 400,000th new car, Yu Chengdong, Huawei's Managing Director, Chairman of Terminal BG, and Chairman of Smart Car Solutions BU, attended and delivered a speech and announced that Wenjie series models will be launched this year In August, Huawei Qiankun ADS 3.0 version was launched, and it is planned to successively push upgrades from August to September. The Xiangjie S9, which will be released on August 6, will debut Huawei’s ADS3.0 intelligent driving system. With the assistance of lidar, Huawei Qiankun ADS3.0 version will greatly improve its intelligent driving capabilities, have end-to-end integrated capabilities, and adopt a new end-to-end architecture of GOD (general obstacle identification)/PDP (predictive decision-making and control) , providing the NCA function of smart driving from parking space to parking space, and upgrading CAS3.0
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Which version of Apple 16 system is the best?
Mar 08, 2024 pm 05:16 PM
The best version of the Apple 16 system is iOS16.1.4. The best version of the iOS16 system may vary from person to person. The additions and improvements in daily use experience have also been praised by many users. Which version of the Apple 16 system is the best? Answer: iOS16.1.4 The best version of the iOS 16 system may vary from person to person. According to public information, iOS16, launched in 2022, is considered a very stable and performant version, and users are quite satisfied with its overall experience. In addition, the addition of new features and improvements in daily use experience in iOS16 have also been well received by many users. Especially in terms of updated battery life, signal performance and heating control, user feedback has been relatively positive. However, considering iPhone14
Always new! Huawei Mate60 series upgrades to HarmonyOS 4.2: AI cloud enhancement, Xiaoyi Dialect is so easy to use
Jun 02, 2024 pm 02:58 PM
On April 11, Huawei officially announced the HarmonyOS 4.2 100-machine upgrade plan for the first time. This time, more than 180 devices will participate in the upgrade, covering mobile phones, tablets, watches, headphones, smart screens and other devices. In the past month, with the steady progress of the HarmonyOS4.2 100-machine upgrade plan, many popular models including Huawei Pocket2, Huawei MateX5 series, nova12 series, Huawei Pura series, etc. have also started to upgrade and adapt, which means that there will be More Huawei model users can enjoy the common and often new experience brought by HarmonyOS. Judging from user feedback, the experience of Huawei Mate60 series models has improved in all aspects after upgrading HarmonyOS4.2. Especially Huawei M
Detailed explanation of how to modify system date in Oracle database
Mar 09, 2024 am 10:21 AM
Detailed explanation of the method of modifying the system date in the Oracle database. In the Oracle database, the method of modifying the system date mainly involves modifying the NLS_DATE_FORMAT parameter and using the SYSDATE function. This article will introduce these two methods and their specific code examples in detail to help readers better understand and master the operation of modifying the system date in the Oracle database. 1. Modify NLS_DATE_FORMAT parameter method NLS_DATE_FORMAT is Oracle data
Differences and similarities of cmd commands in Linux and Windows systems
Mar 15, 2024 am 08:12 AM
Linux and Windows are two common operating systems, representing the open source Linux system and the commercial Windows system respectively. In both operating systems, there is a command line interface for users to interact with the operating system. In Linux systems, users use the Shell command line, while in Windows systems, users use the cmd command line. The Shell command line in Linux system is a very powerful tool that can complete almost all system management tasks.
Where is the system font storage path?
Feb 19, 2024 pm 09:11 PM
In which folder are the system fonts located? In modern computer systems, fonts play a vital role, affecting our reading experience and the beauty of text expression. For some users who are keen on personalization and customization, it is particularly important to understand the storage location of system fonts. So, in which folder are system fonts stored? This article will reveal them one by one for everyone. In the Windows operating system, system fonts are stored in a folder called "Fonts". This folder is located in the Win C drive by default.
