js实现动态计数效果

最新推荐文章于 2020-06-03 15:43:42 发布

acugck6042

最新推荐文章于 2020-06-03 15:43:42 发布

阅读量399

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MY0101/p/6525950.html

版权

下面附有数字图片和数字边框图

<!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=&#39;/content/buyRecords&#39;"> <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>