jquery制作简单的投票系统

最新推荐文章于 2022-09-07 19:41:12 发布

web_Hjm

最新推荐文章于 2022-09-07 19:41:12 发布

阅读量2k

点赞数 3

分类专栏： jquery 文章标签： jquery 投票系统

本文链接：https://blog.csdn.net/web_Hjm/article/details/78227101

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先上效果图

样式写的不是太好，具体根据需求来设计

以下是html/css部分

<style type="text/css">
			body{background:lightblue;}
			.vip li{width: 400px;height: 50px;background: white;list-style: none;margin-top: 50px;line-height: 50px;border-radius: 3px;padding-left: 10px;}
			.vip li span:nth-of-type(1){width: 100px;height: 20px;border: 1px solid black;background: lightgrey;display: inline-block;vertical-align: middle;margin-left: 40px;position: relative;}
			.vip li span a{height: 100%;background: red;position: absolute;left: 0;top: 0;}
			.vip li button{border: none;box-shadow: 1px 3px 3px lightsteelblue;background: rgb(217,0,0);border-radius: 30px;height: 30px;color: white;margin-left: 30px;outline: none;}
			.vip li button:hover{background: rgb(217,0,0);}
</style>

<body>
		<ul class="vip">
			<li>
				免费云播空间 
				<span><a href=""></a></span>
				<button>投一票</button>
				<span>0%</span>
			</li>
			<li>
				连续包月优惠
				<span><a href=""></a></span>
				<button>投一票</button>
				<span>0%</span>
			</li>
			<li>
				免费游戏礼包
				<span><a href=""></a></span>
				<button>投一票</button>
				<span>0%</span>
			</li>
			<li>
				丰富购物礼包
				<span><a href=""></a></span>
				<button>投一票</button>
				<span>0%</span>
			</li>
		</ul>
</body>

前面的结构就没什么好说的了，下面是js部分

<script>
		var sum = 100 // 总票数 
		$('.vip li button').click(function(){
//			console.log($(this).siblings('span').find('a').text())
			if(sum == 0){
				alert("投票已结束")
				return;
			}
			//当票数为0时点击无效 为0时表示4个投票系统加起来已经100%所有人已经投完票 可以根据实时人数来决定
			sum -= 1;//点击减票数
			var liw = $(this).siblings('span').find('a').width();//获取当前a标签的宽度
			liw += 1; //点击加1 添加背景的宽度；
			console.log(liw,sum)
			var index = $(this).parent().index('.vip li'); 
			$(this).parent().find('span:nth-of-type(2)').text(liw+"%") //显示点击一次所占总百分比的比例 如果人数不是100个人可以根据实际需求
			$('.vip li').eq(index).find('a').animate({width:liw+"px"},50,"linear") //添加投票条的长度
			
			
		})
</script>

本人水平有限，如有纰漏请指出。。多多指教