基于jquery实现彩色投票进度条代码解析

时间:2021-10-18 12:04:47

一、需求

如下图

基于jquery实现彩色投票进度条代码解析

重点是要实现进度条。

二、分析

原理:动态设置<p>的子元素<span>的宽度值。

1、简单的雏形

假设只有一个进度条,如下,我们只需要知道p元素的宽度,span元素的百分比,相乘即得到span的宽度,浏览器加载时动态设置span的宽度即可实现进度条的效果。

  1. <style>
  2. .long{width:100px;border:1px solid #7f7f7f;height:14px;background-color:#d6d6d6;}
  3. .short{float:left;height:14px;background-color:#0FF;}
  4. </style>
  5.  
  6. <body>
  7. <P class="long"><span class="short"></span></P>
  8. <script src="http://code.jquery.com/jquery-latest.js"></script>
  9. <script>
  10. var percent=0.5;
  11. var longWidth=100;
  12. var shortWidth=percent*longWidth;
  13.  
  14. $(".short").animate({width:shortWidth+"px"},'slow');
  15.  
  16. </script>
  17. </body>

基于jquery实现彩色投票进度条代码解析

2、投票进度条实现过程

第一步:

结构如下

  1. <meta charset="utf-8">
  2. <style>
  3. /*样式重置*/
  4. ul,h4,p{margin:0;padding:0;}
  5. /*清除浮动*/
  6. .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
  7.  
  8. body { font: 12px/1.5 arial, 宋体; }
  9. html, body { color: #333333; }
  10. /*投票css*/
  11. .vote-box-list{border:1px solid red;position:absolute;}
  12. .vote-box-list li{list-style:none;margin:10px 0;}
  13. .vote-item-wrap h4,.vote-item-wrap .vnum{float:left;font-size:14px;font-weight:normal;line-height:16px;}
  14. .vote-item-wrap p{float:left;height:14px;width:200px;border:1px solid #E2E2E2;background-color:#EFEFEF;margin:0 10px;}
  15. .vote-item-wrap p span{float:left;height:14px;/*width:30px;background-color:#c2f263;*/}
  16. </style>
  17. <ul class="vote-box-list clearfix" id="appVoteBox">
  18. <li class="vl-item" id="voteItem0">
  19. <div class="vote-item-wrap clearfix">
  20. <h4>A:</h4>
  21. <p class="litem"><span></span></p>
  22. <span class="vnum">79(2%)</span>
  23. </div>
  24. </li>
  25. <li class="vl-item" id="voteItem1" >
  26. <div class="vote-item-wrap clearfix">
  27. <h4>B:</h4>
  28. <p class="litem"><span></span></p>
  29. <span class="vnum">1986(61%)</span>
  30. </div>
  31. </li>
  32. <li class="vl-item" id="voteItem2">
  33. <div class="vote-item-wrap clearfix">
  34. <h4>C:</h4>
  35. <p class="litem"><span></span></p>
  36. <span class="vnum">1153(36%)</span>
  37. </div>
  38. </li>
  39. <li class="vl-item" id="voteItem3" >
  40. <div class="vote-item-wrap clearfix">
  41. <h4>D:</h4>
  42. <p class="litem"><span></span></p>
  43. <span class="vnum">415(13%)</span>
  44. </div>
  45. </li>
  46. <li class="vl-item" id="voteItem4" >
  47. <div class="vote-item-wrap clearfix">
  48. <h4>E:</h4>
  49. <p class="litem"><span></span></p>
  50. <span class="vnum">89(3%)</span>
  51. </div>
  52. </li>
  53. </ul>

给span增加一个width和背景色,就可以出现进度条的效果。这一步用js实现。

基于jquery实现彩色投票进度条代码解析

第二步、js设置span的宽度

  1. <script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script>
  3.  
  4. var Vote={};
  5. Vote.ListShow=(function(){
  6. var longWidth;
  7. var percentArr=[];
  8. var shortWidth=[];
  9. var spanArr=[];
  10.  
  11. /*初始化*/
  12. function init(o){
  13. voteId=o.id;
  14. longWidth=o.width;
  15. percentArr=o.percent;
  16. shortWidth=calWidth();
  17. spanArr=findSpans();
  18. }
  19. /*根据百分比计每个算span的实际宽度*/
  20. function calWidth(){
  21. var arr=[];
  22. for(var i=0;i<percentArr.length;i++){
  23. var tempLength=percentArr[i]*longWidth;
  24. arr.push(tempLength);
  25. }
  26. return arr;
  27. }
  28. /*将全部span存为一个数组*/
  29. function findSpans(){
  30. var litems=$("#"+voteId).find(".litem");
  31. var arr=[]
  32. for(var i=0;i<litems.length;i++){
  33. arr.push(litems[i].children[0]);
  34. }
  35. return arr;
  36. }
  37. /*每个span元素设置宽度*/
  38. function setWidth(){
  39. for(i=0;i<percentArr.length;i++){
  40. $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
  41. $(spanArr[i]).css({'background-color':"#c2f263"});
  42. }
  43.  
  44. }
  45. return {init:init,set:setWidth};
  46. })();
  47.  
  48. /*调用*/
  49. Vote.ListShow.init(
  50. {
  51. id:'appVoteBox',
  52. width:200-2 ,
  53. percent:[0.02,0.61,0.36,0.13,0.3],
  54. });
  55. Vote.ListShow.set();
  56.  
  57. </script>

效果:

基于jquery实现彩色投票进度条代码解析

第三步,js设置span的背景色

第二步中的背景色都是如下设置为一样。

$(spanArr[i]).css({'background-color':"#c2f263"});

现在随机生成背景色,做一个彩色的进度条。

  1. <script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script>
  3.  
  4. var Vote={};
  5. Vote.ListShow=(function(){
  6. var longWidth;
  7. var percentArr=[];
  8. var shortWidth=[];
  9. var spanArr=[];
  10. var colorArr=[];
  11.  
  12. /*初始化*/
  13. function init(o){
  14. voteId=o.id;
  15. longWidth=o.width;
  16. percentArr=o.percent;
  17. shortWidth=calWidth();
  18. spanArr=findSpans();
  19. colorArr=genColor();
  20. }
  21. /*根据百分比计每个算span的实际宽度*/
  22. function calWidth(){
  23. var arr=[];
  24. for(var i=0;i<percentArr.length;i++){
  25. var tempLength=percentArr[i]*longWidth;
  26. arr.push(tempLength);
  27. }
  28. return arr;
  29. }
  30. /*将全部span存为一个数组*/
  31. function findSpans(){
  32. var litems=$("#"+voteId).find(".litem");
  33. var arr=[]
  34. for(var i=0;i<litems.length;i++){
  35. arr.push(litems[i].children[0]);
  36. }
  37. return arr;
  38. }
  39. /*o是颜色数组,随机选择length种颜色返回*/
  40. function genColor() {
  41. var o = [];
  42. var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"]; //彩色进度条
  43. var colorsArr = n.slice();
  44. for (var i = 0;i < percentArr.length; i++){
  45. //Math.random()返回0.0 ~ 1.0 之间的一个伪随机数。
  46. //Math.floor()向下取整
  47. var k = Math.floor(Math.random()* colorsArr.length);
  48. o.push(colorsArr[k]);
  49. //取完一种颜色后就从颜色数组中删除
  50. colorsArr.splice(k, 1);
  51. if (colorsArr.length == 0){
  52. colorsArr = n.slice()}
  53. }
  54. return o;
  55. }
  56. /*每个span元素设置宽度*/
  57. function setWidth(){
  58. for(i=0;i<percentArr.length;i++){
  59. $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
  60. $(spanArr[i]).css({'background-color':colorArr[i]});
  61. }
  62.  
  63. }
  64. return {init:init,set:setWidth};
  65. })();
  66.  
  67. /*调用*/
  68.  
  69. Vote.ListShow.init(
  70. {
  71. id:'appVoteBox',
  72. width:200-2 ,
  73. percent:[0.02,0.61,0.36,0.13,0.3],
  74. });
  75. Vote.ListShow.set();
  76.  
  77. </script>

最终效果:

基于jquery实现彩色投票进度条代码解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

原文链接:https://www.cnblogs.com/starof/p/4958786.html