用JSP在线投票系统代码分享

最新推荐文章于 2024-08-26 22:22:14 发布

a2595803

最新推荐文章于 2024-08-26 22:22:14 发布

阅读量4.8k

点赞数 1

用JSP在线投票系统代码分享，样式写的不是太好，具体根据需求来设计，希望大家不要太介意。

以下是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>http://www.aivtp.com/</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>

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