jquery,柱状条
web前端-js教程
本文实例介绍了jquery实现的柱状条，常用于数据统计，下面就对代码做一下分享，并详细介绍一下它的实现过程。有菜商城 源码,ubuntu重启总是恢复,tomcat的性能及其优化,爬虫经典代码,PHP和asp哪个适合unix,seo研究内容lzw
代码如下:好的源码站,ubuntu安装引导指令,tomcat会话数最大值,爬虫软件价位,php页面数据库修改,seo模型解说lzw
上面的代码实现柱状条数据的动态效果，下面介绍一下它的实现过程。jquery柱状条 .container{ width:20px; height:50px; border:1px solid #999; font-size:10px; float:left; margin-left:5px;}$(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);} }});82%62%
1.$(function(){})，当文档结构完全加载完毕灾区执行函数中的代码。
2.var i=1，声明一个变量并赋初值为1，在后面会用到，这里暂时不做介绍。
源码出售平台,vscode深度学习,ubuntu修改用于显示的卡,tomcat rpm安装,sqlite 安卓例子,响应式轮播插件,前端框架初学技术学习,python爬虫探究前任3,php 字符串个数,云南seo 优化,网站建设公司企业网站管理系统,超酷网页视频播,大模板插架,jsp程序笔试lzw
3.$(‘#top’).height(8)，设置top元素的高度为8px。4.$(‘#buttom’).css(‘marginTop’,42)，设置buttom元素的上边距为42px42+8=50恰好是容器元素的高度，这样top元素就能够恰好位于容器的顶端。
5.$(‘#buttom’).css(‘background’,’#d6d6d6′),设置bottom元素的背景颜色。
6.interid=setInterval(Showgao,0)，使用定时器函数不断调用Showgao函数。
7.function Showgao(){}，此函数没执行一次，都会相应的设置一次bottom元素的上外边距和高度，从而达到，top元素始终位于顶部和柱状条动态增加的效果。
8.var oldH=$(‘#buttom’).css(‘marginTop’)，获取buttom元素的上外边距的尺寸。9.var h= oldH.substr(0,oldH.indexOf(‘px’))，获取尺寸值的数字部分，比如”28px”中的28。
10.$(‘#buttom’).css(‘marginTop’,h-1)，将上外边距的尺寸减一。
11.$(‘#buttom’).height(i)，设置buttom元素的高度。
12.i++，i的值加1。
13.if(i==43){clearInterval(interid);}，如果i的值等于43，说明buttom的高度值等于42px，恰好和top的高度和为50px，那么就停止定时器函数的执行。
以上就是本文的详细内容，希望对大家学习jquery程序设计有所帮助。