js实现动态计数效果
下面附有数字图片和数字边框图
- <!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实现动态计数效果的更多相关文章
- JavaScript实现动态打字效果
废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- js页面动态时间展示
效果图: 具体代码 js代码 <script type="text/javascript"> var t = null; t = setTimeout(time,100 ...
- echart.gl.js实现动态3D柱状图
echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...
- 9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...
随机推荐
- 网络结构解读之inception系列五:Inception V4
网络结构解读之inception系列五:Inception V4 在残差逐渐当道时,google开始研究inception和残差网络的性能差异以及结合的可能性,并且给出了实验结构. 本文思想阐述不多, ...
- python基础-logging应用
import logging.config BASE_DIR=os.path.dirname(os.path.dirname(os.path.abspath(__file__)))LOG_PATH=o ...
- Redis Replication & Sentinel
实践目标: Redis Replication 一主:192.168.1.104 双从:192.168.1.101 192.168.1.103 Sentinel:192.168.1.102 系统环境: ...
- php7开启强类型模式
版权声明: https://blog.csdn.net/shi_yi_fei/article/details/52006809 我们知道php是一种弱类型的编程语言,但是php7已经有所改变,可以支持 ...
- ROCR包中ROC曲线计算是取大于cutoff还是大于等于cutoff
找到对应的代码如下 .compute.unnormalized.roc.curve function (predictions, labels) { pos.label <- levels(la ...
- 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 ...
- 数据交换格式之 - XML
XML简介 XML是一种可扩展的标记语言,被设计用来传输和存储数据.传输数据. 需要自定义标签,自我描述性,XML是W3C的推荐标准: XML的特点与作用 特点: xml与操作系统.编程语言的开发平台 ...
- mongodb+nodejs 增删查的demo
1.启动数据库 启动完成后显示 端口号是27017 2.创建数据库 创建一个名为mydb的数据库 3.先查询一下当然的用户,再新增一个 4.创建数据表,查询所有的表 db.createCollec ...
- 5.appium命令行环境搭建及参数使用
1.安装淘宝npm(cnpm) (1)输入以下命令 :npm install -g cnpm --registry=https://registry.npm.taobao.org (2)输入cnpm ...
- 玩转gulp之压缩打包热重载
上节上上节我们讲了gulp的sass编译和watch监听,动态加载 这样我们就可以做到,我管我写我的sass然后保存,自动编译,就好像我们在写css一样,这是一个自动化的一大步.我们呱唧呱唧. 我们已 ...