search

Home  >  Article  >  Web Front-end  >  Simple example demonstration of jquery color voting progress bar_jquery

Simple example demonstration of jquery color voting progress bar_jquery

WBOY
WBOYOriginal
2016-05-16 15:30:291517browse

1. Demand
As shown below

The key point is to implement the progress bar.

2. Analysis
In the article "Add and delete tags in html5", it was mentioned that html5 has added a new progress tag. But there are definitely compatibility issues. The production environment is not suitable, so the implementation must be simulated.

Principle: Dynamically set the width value of the sub-element 45a2772a6b6107b401db3c9b82c049c2 of e388a4556c0f65e1904146cc1a846bee.

1. Simple prototype
 Assume there is only one progress bar, as shown below. We only need to know the width of the p element and the percentage of the span element. Multiply them to get the width of the span. When the browser loads, the width of the span can be dynamically set to achieve the effect of the progress bar. 

<style>
.long{width:100px;border:1px solid #7f7f7f;height:14px;background-color:#d6d6d6;}
.short{float:left;height:14px;background-color:#0FF;}
</style>

<body>
<P class="long"><span class="short"></span></P>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var percent=0.5;
var longWidth=100;
var shortWidth=percent*longWidth;

$(".short").animate({width:shortWidth+"px"},'slow');

</script>
</body>

2. Implementation process of voting progress bar
Step 1: The structure is as follows

<meta charset="utf-8">
<style>
/*样式重置*/
ul,h4,p{margin:0;padding:0;}
/*清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

body { font: 12px/1.5 arial, 宋体; }
html, body { color: #333333; }
/*投票css*/
.vote-box-list{border:1px solid red;position:absolute;}
.vote-box-list li{list-style:none;margin:10px 0;}
.vote-item-wrap h4,.vote-item-wrap .vnum{float:left;font-size:14px;font-weight:normal;line-height:16px;}
.vote-item-wrap p{float:left;height:14px;width:200px;border:1px solid #E2E2E2;background-color:#EFEFEF;margin:0 10px;}
.vote-item-wrap p span{float:left;height:14px;/*width:30px;background-color:#c2f263;*/}
</style>
<ul class="vote-box-list clearfix" id="appVoteBox">
 <li class="vl-item" id="voteItem0">
 <div class="vote-item-wrap clearfix">
  <h4>A：</h4>
  <p class="litem"><span></span></p>
  <span class="vnum">79（2%）</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem1" >
 <div class="vote-item-wrap clearfix">
  <h4>B：</h4>
  <p class="litem"><span></span></p>
  <span class="vnum">1986（61%）</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem2">
 <div class="vote-item-wrap clearfix">
  <h4>C：</h4>
  <p class="litem"><span></span></p>
  <span class="vnum">1153（36%）</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem3" >
 <div class="vote-item-wrap clearfix">
  <h4>D：</h4>
  <p class="litem"><span></span></p>
  <span class="vnum">415（13%）</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem4" >
 <div class="vote-item-wrap clearfix">
  <h4>E：</h4>
  <p class="litem"><span></span></p>
  <span class="vnum">89（3%）</span>
 </div>
 </li>
</ul>

Add a width and background color to span to create a progress bar effect. This step is implemented using js.

The second step is to set the span width with js

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

var Vote={};
Vote.ListShow=(function(){
 var longWidth;
 var percentArr=[];
 var shortWidth=[];
 var spanArr=[];
 
 /*初始化*/
 function init(o){
  voteId=o.id;
  longWidth=o.width;
  percentArr=o.percent;
  shortWidth=calWidth();
  spanArr=findSpans();
 }
 /*根据百分比计每个算span的实际宽度*/
 function calWidth(){
  var arr=[];
  for(var i=0;i<percentArr.length;i++){
   var tempLength=percentArr[i]*longWidth;
   arr.push(tempLength);
  }
  return arr;
 }
 /*将全部span存为一个数组*/
 function findSpans(){
  var litems=$("#"+voteId).find(".litem");
  var arr=[]
  for(var i=0;i<litems.length;i++){
   arr.push(litems[i].children[0]);
  }
  return arr;
 }
 /*每个span元素设置宽度*/
 function setWidth(){
  for(i=0;i<percentArr.length;i++){
   $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
   $(spanArr[i]).css({'background-color':"#c2f263"}); 
  }
  
 }
 return {init:init,set:setWidth};
})();

/*调用*/
Vote.ListShow.init(
{
 id:'appVoteBox',
 width:200-2 ,
 percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();

</script>

Effect:

The third step, js sets the background color of span
The background color in the second step is set to the same as below. 

$(spanArr[i]).css({'background-color':"#c2f263"}); 
 现在随机生成背景色，做一个彩色的进度条。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

var Vote={};
Vote.ListShow=(function(){
 var longWidth;
 var percentArr=[];
 var shortWidth=[];
 var spanArr=[];
 var colorArr=[];
 
 /*初始化*/
 function init(o){
  voteId=o.id;
  longWidth=o.width;
  percentArr=o.percent;
  shortWidth=calWidth();
  spanArr=findSpans();
  colorArr=genColor();
 }
 /*根据百分比计每个算span的实际宽度*/
 function calWidth(){
  var arr=[];
  for(var i=0;i<percentArr.length;i++){
   var tempLength=percentArr[i]*longWidth;
   arr.push(tempLength);
  }
  return arr;
 }
 /*将全部span存为一个数组*/
 function findSpans(){
  var litems=$("#"+voteId).find(".litem");
  var arr=[]
  for(var i=0;i<litems.length;i++){
   arr.push(litems[i].children[0]);
  }
  return arr;
 }
 /*o是颜色数组，随机选择length种颜色返回*/
 function genColor() { 
  var o = []; 
  var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"]; //彩色进度条
  var colorsArr = n.slice(); 
  for (var i = 0;i < percentArr.length; i++){ 
   //Math.random()返回0.0 ~ 1.0 之间的一个伪随机数。
   //Math.floor()向下取整
   var k = Math.floor(Math.random()* colorsArr.length); 
   o.push(colorsArr[k]); 
   //取完一种颜色后就从颜色数组中删除
   colorsArr.splice(k, 1); 
   if (colorsArr.length == 0){ 
   colorsArr = n.slice()} 
  } 
  return o;
 } 
 /*每个span元素设置宽度*/
 function setWidth(){
  for(i=0;i<percentArr.length;i++){
   $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
   $(spanArr[i]).css({'background-color':colorArr[i]}); 
  }
  
 }
 return {init:init,set:setWidth};
})();

/*调用*/

Vote.ListShow.init(
{
 id:'appVoteBox',
 width:200-2 ,
 percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();

</script>

Final effect:

The above is the special effect of the colored progress bar, which is especially suitable for voting. The effect is very obvious. I hope it will be helpful to everyone's learning and you will like this colored progress bar.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the combination of JavaScript and HTML_javascript skillsNext article：Detailed explanation of the combination of JavaScript and HTML_javascript skills

Related articles

See more