欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【前端笔记】使用jquery实现简单的投票功能

程序员文章站 2024-02-02 12:54:52
...

首先先明确下需求：

  • 可以显示是第几轮投票
  • 显示每轮共有几票，还剩几票
  • 如果这轮剩余票数为0，留下票数最多的一个（如果有多个票数最高者，则都保留下来，进行下一轮投票，直至最后只有一位留下）

效果图如下：

【前端笔记】使用jquery实现简单的投票功能

再次感叹jquery比js原生代码简短太多；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../../../jquery/node_modules/jquery/dist/jquery.js"></script>
	<style>
		*{
			padding: 0px;
			margin-left: 0px;
		}
		ul>li{
			background: blue;
			width: 250px;
			height: 50px;
			border-radius: 0px 25px 25px 0px;
			margin-bottom: 10px;
		}
		ul >li >span,div{
			display: inline-block;
			height: 44px;
			width: 60px;
			text-align: center;
			line-height: 44px;
			color: #fff;
			font-weight: bold;
		}
		div{
			background: #000;
			margin-top: 2px;
			border-radius: 10px;
		}
		p,span{
			font-weight: bold;
		}
	</style>
</head>
<body>
<p>第<span>1</span>轮投票</p>
<ul>
	<li>
		<span class="num">0</span>
		<div>投票</div>
		<span>候选人1</span>
	</li>
	<li>
		<span class="num">0</span>
		<div>投票</div>
		<span>候选人2</span>
	</li>
	<li>
		<span class="num">0</span>
		<div>投票</div>
		<span>候选人3</span>
	</li>
	<li>
		<span class="num">0</span>
		<div>投票</div>
		<span>候选人4</span>
	</li>
</ul>
<p>剩余<span>7</span>张</p>
<script>
	//投票点击事件
	$('div').click(function(){
		if ($('p:eq(1)').children().text()<=0) { return false}//判断剩余票数，如果是0，就不能再点击
		$(this).prev().text(function(index,text){return parseInt(text)+1})//给这个候选者的票数+1
		$('p:eq(1)').children().text(function(index,text){return parseInt(text)-1})//剩余票数-1
		$(this).parent().animate({width:"+=50"},500)//用动画来改变被投票者的长度
		var arr=[];
		var max=0;	
		$('.num').each(function(index){
			arr[index]=$(this).text()   //把每个投票者的票数存入数组
		})
		$.each(arr,function(index,value){
			if (index==0) {
				max=arr[0] 
			}else{
				max=max>parseInt(arr[index])?max:parseInt(arr[index])   //取数组最大值
			}
		})
		// console.log(arr)
		// console.log(max)
		//判断剩余票数是否为0，判断元素隐藏 和 是不是要进入下一轮
		if ($('p:eq(1)').children().text()==0) {
			$('.num').each(function(){
				if ($(this).text()!=max) {
					$(this).parent().hide()          
				}
			})
			//新一轮
			if ($('li:visible').length>1) {
				$('p:eq(0)').children().text(function(index,text){return parseInt(text)+1})
				$('p:eq(1)').children().text(7)
			}
		}
	})

 

相关标签： 前端 jquery 动画投票

上一篇： Spring Boot 热部署

下一篇： spring boot 打包jar

推荐阅读