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 ...
随机推荐
- pip报错ImportError: cannot import name main
编辑pip sudo gedit /usr/bin/pip 修改pip文件: 源文件 from pip import main if __name__ == '__main__': sys.exit( ...
- JavaSE_02_Thread类01
1.1 并发与并行 并发:指两个或多个事件在同一个时间段内发生. 这在单 CPU 系统中,每一时刻只能有一道程序执行,即微观上这些程序是分时的交替运行,只不过是给人的感觉是同时运行,那是因为分时交替运 ...
- leyou_06_Nginx的自启
1.在linux系统的/etc/init.d/目录下创建nginx文件 vim /etc/init.d/nginx 添加以下内容 #!/bin/sh # # nginx - this script s ...
- JS两个相同的字符串被判断为不相等问题
今天在写js的时候,遇到一个奇怪的问题,明明两个字符串相等,用alert()打印出来都一样,typeof的结果都是string, 仔细查看过了首尾都没有空格. 可是用a==b却判断为不相等 后来在网上 ...
- Web前后端缓存技术(缓存的主要作用是什么)
Web前后端缓存技术Web前后端缓存技术(缓存的主要作用是什么) 一.总结 一句话总结: 加快页面打开速度 减少网络带宽消耗 降低服务器压力 1.在Web应用中,应用缓存的地方有哪些? 主要有浏览器缓 ...
- [code]自动白平衡white blance
//2013.10.24 //eageldiao //自动白平衡 CvScalar rgb; rgb=cvAvg(src); #ifdef COLOR_GW //灰度世界假设(R,= R*K/Ravg ...
- Java下利用Jackson进行JSON解析和序列化1
Java下常见的Json类库有Gson.JSON-lib和Jackson等,Jackson相对来说比较高效,在项目中主要使用Jackson进行JSON和Java对象转换,下面给出一些Jackson的J ...
- Mybatis编写初始化Dao代码
第一步:创建User实体类(POJO) package com.xu.pojo; import java.util.Date; /** * * @author 徐亮亮 * Title: User * ...
- Promise的源码实现(符合Promise/A+规范)
我们手写一个Promise/A+规范,然后安装测试脚本,以求通过这个规范. //Promise/A+源代码 // new Promise时,需要传递一个executor执行器,执行器立即执行 // e ...
- MaxCompute 最新特性介绍 | 2019大数据技术公开课第三季
摘要:距离上一次MaxCompute新功能的线上发布已经过去了大约一个季度的时间,而在这一段时间里,MaxCompute不断地在增加新的功能和特性,比如参数化视图.UDF支持动态参数.支持分区裁剪.生 ...