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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>动态计数显示</title>
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <link href="" rel="stylesheet">
  10. <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  11.  
  12. <style type="text/css">
  13.     .buyers{ float: left; line-height: 29px; font-size:14px; height: 29px; overflow: hidden; color: #686868; position: absolute; left: 320px; top: 40px; cursor: pointer }
  14.     .buyers:hover{ color: #222; }
  15.     .buyers span{ float: left; padding-left: 5px; cursor: pointer }
  16.     .buyers label{ float: left; cursor: pointer }
  17.     .buyers font{ float: left; margin-right: 5px; font-size: 24px; color: #e54048; }
  18.     .buyers i{ float: left; padding: 0; width: 23px; height: 29px; overflow: hidden; position: relative; background:url('num-bg.gif') no-repeat; margin-right: 5px; }
  19.     .buyers i em{ display: block; width: 100%; height: 290px; overflow: hidden; background:url('num.png') no-repeat; position: absolute; left: 0; top:0; }
  20.     .buyers label.rc{ position: relative; padding-right: 15px; }
  21.     .buyers label b {
  22.         border-style: solid;
  23.         border-width: 4px 0px 4px 4px;
  24.         border-color: #FFF #FFF #FFF #666;
  25.         width: 0;
  26.         height: 0;
  27.         font-size: 0;
  28.         line-height: 0;
  29.         position: absolute;
  30.         left: 33px;
  31.         top: 12px;
  32.     }
  33.     .buyers label b s {
  34.         border-style: solid;
  35.         border-width: 3px;
  36.         border-color: transparent transparent transparent #FFF;
  37.         width: 0;
  38.         height: 0;
  39.         font-size: 0;
  40.         line-height: 0;
  41.         position: absolute;
  42.         top: -3px;
  43.         left: -5px;
  44.     }
  45.  
  46. </style>
  47. </head>
  48. <body>
  49.       <span class="buyers"
  50.         onclick="location.href='/content/buyRecords'"> <label>累计参与</label>
  51.         <span id="BIDNUMBER">
  52.         </span>
  53.         <label class="rc">人次<b><s></s></b></label>
  54.     </span>
  55.  
  56.    <script type="text/javascript">
  57.  
  58.    var logCount = '012010245';
  59.  
  60.        //参与人数
  61.     $(function(){
  62.         if($("#BIDNUMBER").length>0){
  63.             showBidNumber(logCount,1);
  64.             getBidNumberData();
  65.             setInterval('getBidNumberData()', 10000);
  66.         }
  67.     });
  68.     function getBidNumberData(){
  69.         var i = 0;
  70.         $.post('/welcome/bidCount',{i:i},function(data){
  71.             showBidNumber(data.count,2);
  72.             showGjjNumber(data.gjj);
  73.             i=i+1;
  74.         },'json');
  75.     }
  76.     function showBidNumber(n,c){
  77.         var it = $("#BIDNUMBER i");
  78.         var len = String(n).length;
  79.         for(var i=0;i<len;i++){
  80.             if(c==1 && (i==3 || i==6)){
  81.                 $("#BIDNUMBER").append("<font>,</font>");
  82.             }
  83.             if(it.length<=i){
  84.                 $("#BIDNUMBER").append("<i><em></em></i>");
  85.             }
  86.             var num=String(n).charAt(i);
  87.             var y = -parseInt(num)*29;
  88.             var obj = $("#BIDNUMBER i").eq(i).find('em');
  89.             obj.animate({
  90.                 top: String(y)+'px'
  91.             }, 2000,'swing');
  92.         }
  93.     }
  94.     function showGjjNumber(n){
  95.         $("#GJJ").html("");
  96.         $("#GJJ").html(n);
  97.     }
  98.    </script>
  99. </body>
  100. </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. 网络结构解读之inception系列五：Inception V4

    网络结构解读之inception系列五:Inception V4 在残差逐渐当道时,google开始研究inception和残差网络的性能差异以及结合的可能性,并且给出了实验结构. 本文思想阐述不多, ...

  2. python基础-logging应用

    import logging.config BASE_DIR=os.path.dirname(os.path.dirname(os.path.abspath(__file__)))LOG_PATH=o ...

  3. Redis Replication & Sentinel

    实践目标: Redis Replication 一主:192.168.1.104 双从:192.168.1.101 192.168.1.103 Sentinel:192.168.1.102 系统环境: ...

  4. php7开启强类型模式

    版权声明: https://blog.csdn.net/shi_yi_fei/article/details/52006809 我们知道php是一种弱类型的编程语言,但是php7已经有所改变,可以支持 ...

  5. ROCR包中ROC曲线计算是取大于cutoff还是大于等于cutoff

    找到对应的代码如下 .compute.unnormalized.roc.curve function (predictions, labels) { pos.label <- levels(la ...

  6. APT甲级——A1069 The Black Hole of Numbers

    For any 4-digit integer except the ones with all the digits being the same, if we sort the digits in ...

  7. 数据交换格式之 - XML

    XML简介 XML是一种可扩展的标记语言,被设计用来传输和存储数据.传输数据. 需要自定义标签,自我描述性,XML是W3C的推荐标准: XML的特点与作用 特点: xml与操作系统.编程语言的开发平台 ...

  8. mongodb+nodejs 增删查的demo

    1.启动数据库 启动完成后显示 端口号是27017 2.创建数据库 创建一个名为mydb的数据库   3.先查询一下当然的用户,再新增一个 4.创建数据表,查询所有的表 db.createCollec ...

  9. 5.appium命令行环境搭建及参数使用

    1.安装淘宝npm(cnpm) (1)输入以下命令 :npm install -g cnpm --registry=https://registry.npm.taobao.org (2)输入cnpm ...

  10. 玩转gulp之压缩打包热重载

    上节上上节我们讲了gulp的sass编译和watch监听,动态加载 这样我们就可以做到,我管我写我的sass然后保存,自动编译,就好像我们在写css一样,这是一个自动化的一大步.我们呱唧呱唧. 我们已 ...