jquery调查问卷统计条_横向柱形图

最新推荐文章于 2022-07-01 08:31:41 发布

amohan

最新推荐文章于 2022-07-01 08:31:41 发布

阅读量157

点赞数

分类专栏：网站模版文章标签： jquery javascript 前端

原文链接：https://yy123.ink/frontDetail/11907

版权

网站模版专栏收录该内容

3170 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现投票进度条动画的方法。通过计算每个选项所占的比例，并将其转化为可视化的进度条，使得投票结果一目了然。此外，还介绍了如何通过动画效果增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

这是方法var bar = function (id,title,data){ //展示的id this.id = ""; //标题 this.title = ""; //数据 this.data = ""; //宽 this.width = 500; //背景图片位置 this.bgimg = "images/plan.gif"; //动画速度 this.speed = 1000; //投票总数 var num_all = 0; this.show = function (){ //添加一个table对象 $("#"+this.id).append("") $("#"+this.id+" table").append(""+this.title+"") //计算总数 $(this.data).each(function(i,n){ num_all += parseInt(n[1]); }) var that = this; //起始 var s_img = [0,-52,-104,-156,-208]; //中间点起始坐标 var c_img = [-312,-339,-367,-395,-420]; //结束 var e_img = [-26,-78,-130,-182,-234]; var that = this; var div; $(this.data).each(function(i,n){ //计算比例 var bili = (n[1]*100/num_all).toFixed(2); //计算图片长度, *0.96是为了给前后图片留空间 var img = parseFloat(bili)*0.96; if(img>0) { div = ""; } else { div=""; } $("#"+that.id+" table").append(""+n[0]+"："+div+""+n[1]+"("+bili+"%)") }) this.play(); } this.play = function (){ var that = this; $("#"+this.id+" div").each(function(i,n){ if($(n).attr("fag")) { $(n).animate( { width: $(n).attr("fag")+"%"}, that.speed ) } }) }}调用

dd: