下面附有数字图片和数字边框图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>动态计数显示</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type="text/css"> .buyers{ float: left; line-height: 29px; font-size:14px; height: 29px; overflow: hidden; color: #686868; position: absolute; left: 320px; top: 40px; cursor: pointer } .buyers:hover{ color: #222; } .buyers span{ float: left; padding-left: 5px; cursor: pointer } .buyers label{ float: left; cursor: pointer } .buyers font{ float: left; margin-right: 5px; font-size: 24px; color: #e54048; } .buyers i{ float: left; padding: 0; width: 23px; height: 29px; overflow: hidden; position: relative; background:url('num-bg.gif') no-repeat; margin-right: 5px; } .buyers i em{ display: block; width: 100%; height: 290px; overflow: hidden; background:url('num.png') no-repeat; position: absolute; left: 0; top:0; } .buyers label.rc{ position: relative; padding-right: 15px; } .buyers label b { border-style: solid; border-width: 4px 0px 4px 4px; border-color: #FFF #FFF #FFF #666; width: 0; height: 0; font-size: 0; line-height: 0; position: absolute; left: 33px; top: 12px; } .buyers label b s { border-style: solid; border-width: 3px; border-color: transparent transparent transparent #FFF; width: 0; height: 0; font-size: 0; line-height: 0; position: absolute; top: -3px; left: -5px; } </style> </head> <body> <span class="buyers" onclick="location.href='/content/buyRecords'"> <label>累计参与</label> <span id="BIDNUMBER"> </span> <label class="rc">人次<b><s></s></b></label> </span> <script type="text/javascript"> var logCount = '012010245'; //参与人数 $(function(){ if($("#BIDNUMBER").length>0){ showBidNumber(logCount,1); getBidNumberData(); setInterval('getBidNumberData()', 10000); } }); function getBidNumberData(){ var i = 0; $.post('/welcome/bidCount',{i:i},function(data){ showBidNumber(data.count,2); showGjjNumber(data.gjj); i=i+1; },'json'); } function showBidNumber(n,c){ var it = $("#BIDNUMBER i"); var len = String(n).length; for(var i=0;i<len;i++){ if(c==1 && (i==3 || i==6)){ $("#BIDNUMBER").append("<font>,</font>"); } if(it.length<=i){ $("#BIDNUMBER").append("<i><em></em></i>"); } var num=String(n).charAt(i); var y = -parseInt(num)*29; var obj = $("#BIDNUMBER i").eq(i).find('em'); obj.animate({ top: String(y)+'px' }, 2000,'swing'); } } function showGjjNumber(n){ $("#GJJ").html(""); $("#GJJ").html(n); } </script> </body> </html>
