search

Home >Web Front-end >JS Tutorial >Realizing dynamic vertical column bar effects based on jquery_jquery

Realizing dynamic vertical column bar effects based on jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:15:451079browse

The example in this article introduces the columnar bar implemented by jquery, which is often used for data statistics. Let’s share the code and introduce its implementation process in detail.

The code is as follows:

<html> 
<head> 
<meta charset="gb2312"> 
<title>jquery柱状条</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 implements the dynamic effect of columnar bar data. The following is an introduction to its implementation process.
1.$(function(){}), When the document structure is completely loaded, the code in the disaster area is executed.
2.var i=1, declare a variable and assign the initial value to 1. It will be used later and will not be introduced here for the time being.

3.$('#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 can be exactly Located at the top of the container.
5.$('#buttom').css('background','#d6d6d6'),Set the background color of the bottom element.
6.interid=setInterval(Showgao,0), Use the timer function to continuously call the Showgao function.
7.function Showgao(){}, If this function is not executed once, it will set the top margin and height of the bottom element accordingly, so as to achieve the effect that the top element is always at the top and the columnar bar is dynamically increased. .
8.var oldH=$('#buttom').css('marginTop'), Get the size of the top margin of the buttom element. 9.var h= oldH.substr(0,oldH.indexOf('px')), get the numerical part of the size value, such as 28 in "28px".
10.$('#buttom').css('marginTop',h-1), Reduce the size of the top margin by one.
11.$('#buttom').height(i), Set the height of the buttom element.
12.i++, the value of i is increased by 1.
13.if(i==43){clearInterval(interid);}, If the value of i is equal to 43, it means that the height value of buttom is equal to 42px, which happens to be 50px with the height of top, then stop Execution of timer function.

The above is the detailed content of this article. I hope it will be helpful for everyone to learn jquery programming.

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：Associative prototype chain attribute characteristics in JavaScript_javascript skillsNext article：Associative prototype chain attribute characteristics in JavaScript_javascript skills

Related articles

See more