Dynamic vertical bar effects are realized based on jquery

  • 2020-12-20 03:28:06
  • OfStack

This article introduces the jquery implementation of the bar, often used for data statistics, the following code to do 1 to share, and in detail 1 to introduce its implementation process.

The code is as follows:


<html> 
<head> 
<meta charset="gb2312"> 
<title>jquery Article column. </title> 
<style type="text/css">
.container{
 width:20px;
 height:50px;
 border:1px solid #999;
 font-size:10px;
 float:left;
 margin-left:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
 var i=1;
 $('#top').height(8);
 $('#buttom').css('marginTop',42);
 $('#buttom').css('background','#d6d6d6');
  interid=setInterval(Showgao,0);
 function Showgao(){
  var oldH=$('#buttom').css('marginTop');
  var h= oldH.substr(0,oldH.indexOf('px'));
  $('#buttom').css('marginTop',h-1);
  $('#buttom').height(i);
  i++;
  if(i==43){clearInterval(interid);}
 }
 
 var i1=1;
 $('#top1').height(4);
 $('#buttom1').css('marginTop',46);
 $('#buttom1').css('background','red');
 interid1=setInterval(Showgao1,1);
 function Showgao1(){
  var oldH=$('#buttom1').css('marginTop');
  var h= oldH.substr(0,oldH.indexOf('px'));
  $('#buttom1').css('marginTop',h-1);
  $('#buttom1').height(i1);
  i1++;
  if(i1==30){clearInterval(interid1);}
 }
});
</script>
</head>
<body>
<div class="container">
 <div id="top">82%</div>
 <div id="buttom"></div>
</div>
<div class="container">
 <div id="top1" >62%</div>
 <div id="buttom1"></div>
</div>
</body>
</html>

The above code to achieve the dynamic effect of the bar data, the following describes its implementation process 1.
1.$(function(){}), when the document structure has fully loaded the code in the disaster area execution function.
2.var i=1, declare 1 variable and assign the initial value as 1, which will be used later, but I will not introduce it here for the moment.

$('#top').height(8), set the height of the top element to 8px.
4.$('#buttom').css('marginTop',42), set the top margin of the buttom element to 42px42+8=50, which is exactly the height of the container element, so that the top element is right at the top of the container.
5.$('#buttom').css('background','#d6d6d6'), setting the background color of the bottom element.
6.interid=setInterval(Showgao,0), using the timer function to call Showgao function repeatedly.
7.function Showgao(){}, which is not executed once, will set the upper margin and height of bottom element once accordingly, so that the top element is always at the top and the bar increases dynamically.
var oldH=$('#buttom').css('marginTop'), gets the size of the upper margin of the buttom element. 9.var h= oldH.substr (0, oldH.indexOf ('px')), gets the numeric portion of the size value, such as 28 in "28px".
10.$('#buttom').css('marginTop', ES63en-1), reduce the upper margin size by 1.
11.$('#buttom').height(i), which sets the height of the buttom element.
12.i++, i + 1.
13.if(i==43){clearInterval(interid); }, if the value of i is equal to 43, indicating that the height value of buttom is equal to 42px, which happens to be the same as the height sum of top is 50px, then stop the execution of the timer function.

Above is the detailed content of this article, I hope to help you learn jquery programming.


Related articles: