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

jquery easyui 进度条做投票进度条使用时设置进度大于100

程序员文章站 2022-03-30 15:56:52
...

jquery easyui 进度条做投票进度条使用时设置进度大于100
最近公司打算出去旅游,老大主动请缨做一个投票系统统计各个旅游地点的票数统计。

其实对于各位大神来说这种软件很简单的。但是对于新手来说的我还是有很多问题需要攻克的。而且这是的进度条我是用了jquery easyui 的进度条插件做的,当时做的时候没考虑完全。最后想想员工挺多,貌似超过100进度条就满了。
没办法还是第一方法就是求度年,不过也知道,只要一个文章不对,那么其他的文章都是不是自己想要的。因为网上流行抄来抄去的,一个原创文章,满世界的都是这一种答案。很难!
没办法,这时候就只能动脑袋了,不然截止日期就要逼近了。

经过冷静的观察分析官方的代码之后:

$('#p').progressbar({
    value: 60,
     text: '{value}'%
});

var value = $('#p').progressbar('getValue');
if (value < 100){
    value += Math.floor(Math.random() * 10);
    $('#p').progressbar('setValue', value);
}

上面代码仔细想想其实很简单的,text这个属性明显是显示的数字,那么value就是进度条的进度了。这么清除了那就好办了,直接根据条件修改就是了。
那么首先我们先改变下进度条的颜色。

 $(".progressbar-value .progressbar-text").css("background-color", "#46A3FF");

然后我们来改变下显示的数字不带百分号,其实就是去掉百分号就行啦。
然后就是进度条的进度了。
下面是我根据我的条件判断之后来显示进度条的进度

 $(valueStar).progressbar('setValue', voteInfo[1] / 10);//这个就是今天的猪脚进度条的进度了。我缩小了10倍。当然你可以按照你自己的意愿来控制。
                            $(valueStar).progressbar(
                                {
                                    text: voteInfo[1]+"票",//这个就是进度条上面的数字。将百分号换成了票。更具体是吧。
                                });

其实本来就没什么只是有时候写代码的时候第一个想的是百度。毕竟省事,然后就不懂脑袋分析代码了。以后自己的警戒一下了。最后放个图:其实我自己也知道页面布局做的超级丑。不过各位见谅,以后会磨练的。
jquery easyui 进度条做投票进度条使用时设置进度大于100