I. Demand
The following figure
The point is to implement the progress bar.
Second, analysis
HTML5 new and deleted tags in the article mentioned HTML5 added progress tag. But there must be compatibility issues. The build environment does not apply, so you want to simulate the implementation.
Principle: Dynamically set the width value of <p> 's child element <span>.
1, the simple embryonic form
Assuming that there is only one progress bar, as follows, we just need to know the width of the P element, the percentage of the span element, the width of the span, and the width of the span when the browser loads, and the effect of the progress bar will be achieved by dynamically setting the spans.
<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, polling progress bar implementation
First step: structure is as follows
<meta charset= "Utf-8" > <style>/* Style Reset * * * ul,h4,p{margin:0;padding:0}/* Clear float/*. clearfix:after{visibility
: hidden;display:block;font-size:0;content: ""; clear:both;height:0;} Body {font:12px/1.5 arial, XXFarEastFont-Franklin, css*/, {color: #333333;}/* Voting vote-box-list{border:1px solid red;position:a
Bsolute;} . 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 ">
Add a width and background color to span to show the effect of the progress bar. This step with JS implementation.
The second step, JS set span width
<script src= "Http://code.jquery.com/jquery-latest.js" ></script> <script> var vote={};
vote.listshow= (function () {var longwidth;
var percentarr=[];
var shortwidth=[];
var spanarr=[];
/* Initialize */function init (o) {voteid=o.id;
Longwidth=o.width;
Percentarr=o.percent;
Shortwidth=calwidth ();
Spanarr=findspans ();
}/* The actual width of the span is calculated per percent/function calwidth () {var arr=[];
for (Var i=0;i<percentarr.length;i++) {var templength=percentarr[i]*longwidth;
Arr.push (templength);
return arr;
/* To save all spans as an array/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; /*//* Set width/function setwidth () {for (i=0;i<percentarr.length;i++) {$ (spanarr[i]) per span element. Animate ({Width:shortwidt
h[i]+ "px"}, ' slow ');
$ (spanarr[i]). css ({' Background-color ': "#c2f263"});
} return {init:init,set:setwidth};
})(); * * Call/Vote.listshow.Init ({id: ' Appvotebox ', width:200-2, percent:[0.02,0.61,0.36,0.13,0.3],});
Vote.ListShow.set ();
</script>
Effect:
Step three, JS sets the background color of span
The background colors in the second step are set to the same as the following.
$ (spanarr[i]). css ({' Background-color ': "#c2f263"});
Now randomly generate background color, make a color progress bar.
<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=[];
/* Initialize */function init (o) {voteid=o.id;
Longwidth=o.width;
Percentarr=o.percent;
Shortwidth=calwidth ();
Spanarr=findspans ();
Colorarr=gencolor ();
}/* The actual width of the span is calculated per percent/function calwidth () {var arr=[];
for (Var i=0;i<percentarr.length;i++) {var templength=percentarr[i]*longwidth;
Arr.push (templength);
return arr;
/* To save all spans as an array/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 is an array of colors, randomly select the length of the color return/function Gencolor () {var o = []; var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3""," #d8e929 "," #e58652 "," #e7ab6d "," #ee335f "," #fbe096 "," #ffc535 "];
Color progress bar var Colorsarr = N.slice ();
for (var i = 0;i < Percentarr.length i++) {//math.random () returns a pseudo random number between 0.0 ~ 1.0.
Math.floor () takes the whole var k = Math.floor (Math.random () * colorsarr.length) down;
O.push (Colorsarr[k]);
Remove Colorsarr.splice (k, 1) from the color array after one color is finished;
if (Colorsarr.length = = 0) {Colorsarr = N.slice ()}} return o; /*//* Set width/function setwidth () {for (i=0;i<percentarr.length;i++) {$ (spanarr[i]) per span element. Animate ({Width:shortwid
th[i]+ "px"}, ' slow ');
$ (spanarr[i]). css ({' Background-color ': Colorarr[i]});
} return {init:init,set:setwidth};
})();
/* Call/* 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 color of the progress bar special effects, especially suitable for voting, the effect is obvious, I hope to help you learn, will like this color progress bar.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
