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

<!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>

js实现动态计数效果的更多相关文章

  1. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  3. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  4. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  5. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  6. js页面动态时间展示

    效果图: 具体代码 js代码 <script type="text/javascript"> var t = null; t = setTimeout(time,100 ...

  7. echart.gl.js实现动态3D柱状图

    echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...

  8. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

随机推荐

  1. 2019-2-26-SublimeText-快速打开当前文件的文件夹

    title author date CreateTime categories SublimeText 快速打开当前文件的文件夹 lindexi 2019-02-26 18:45:29 +0800 2 ...

  2. Linux常用命令的缩写含义

    命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户rpm:redhat package manager 红帽子打包管 ...

  3. Luogu P1850 换教室(期望dp)

    P1850 换教室 题意 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有\(2n\)节课程安排在\(n\)个时间段上.在第\(i(1\l ...

  4. 微信小程序发送手机验证码---倒计时

    var currentTime = 59 //倒计时的事件(单位:s)var interval = null //倒计时函数 Page({ data: { time:59 //倒计时 }, onLoa ...

  5. 构建工具Bazel入门

    Bazel入门   原文:http://bazel.io/docs/getting-started.html 译者:chai2010 安装 安装过程请参考: http://bazel.io/docs/ ...

  6. V8：V8(Javascript引擎)

    ylbtech-V8:V8(Javascript引擎) Lars Bak是这个项目的组长,目前该JavaScript引擎已用于其它项目的开发.第一个版本随着第一个版本的Chrome于2008年9月2日 ...

  7. java 用户注册登陆Demo

    一个用户注册登陆的系统,用到了MD5加密处理密码,实现了一个简单的数据库连接池connectionPool, 实现了注册,登陆,登陆之后修改用户信息等功能,非常适合初学者 一.准备工作 数据库:MyS ...

  8. mysql把表的指定字段值赋给本表另一个字段

    原本是主键一对一关联的,后来发现这样操作很不方便,改成主外键一对一 所以添加一个外键字段bodyId(文章正文单独存一个表) UPDATE t_article SET bodyId=id; 但是等了半 ...

  9. pycharm professional 2019版长效激活

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制. ...

  10. Hadoop Serialization -- hadoop序列化详解 (2)【Text,BytesWritable,NullWritable】

    回顾: 回顾序列化,其实原书的结构很清晰,我截图给出书中的章节结构: 序列化最主要的,最底层的是实现writable接口,wiritable规定读和写的游戏规则 (void write(DataOut ...