帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery数字显示
jQuery数字显示
浏览:993次
-
评论:0次
-
发布时间:2017-09-12
Html
Css
Js
¥
,
,
.
#container { background:black; min-width:600px; } .flip { margin:0 auto; width:400px; height:40px; color:yellow; padding-top:0px; } .price-div { font:12px tahoma,Arial,Verdana,sans-serif; } .price-div > div,.total-price > div { float:left; text-align:center; } .price-icons { background:dimgrey; width:25px; height:30px; line-height:30px; font-size:26px; font-weight:bold; float:left; margin-right:2px; } .price-icon { background:dimgrey; width:28px; height:45px; line-height:48px; font-size:28px; font-weight:bold; float:left; margin-right:5px; } .price-div .number { background:dimgrey; width:25px; height:45px; line-height:48px; font-size:40px; font-weight:bold; overflow:hidden; margin-right:1px; } .price-div .sign { font-size:40px; font-weight:bold; line-height:68px; height:48px; }
/*Javascript代码片段*/ //乘法函数 function accMul(arg1, arg2) { var m = 0, s1 = arg1.toString(), s2 = arg2.toString(); try { m += s1.split(".")[1].length; } catch (e) {} try { m += s2.split(".")[1].length; } catch (e) {} return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); } //给Number类型增加一个mul方法,使用时直接用 .mul 即可完成计算。 Number.prototype.mul = function(arg) { return accMul(arg, this); }; //除法函数 function accDiv(arg1, arg2) { var t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(".")[1].length; } catch (e) {} try { t2 = arg2.toString().split(".")[1].length; } catch (e) {} with(Math) { r1 = Number(arg1.toString().replace(".", "")); r2 = Number(arg2.toString().replace(".", "")); return (r1 / r2) * pow(10, t2 - t1); } } //给Number类型增加一个div方法,,使用时直接用 .div 即可完成计算。 Number.prototype.div = function(arg) { return accDiv(this, arg); }; function accAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); return (arg1.mul(m) + arg2.mul(m)).div(m); } //给Number类型增加一个add方法,,使用时直接用 .add 即可完成计算。 Number.prototype.add = function(arg) { return accAdd(arg, this); }; //减法函数 function Subtr(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度 n = (r1 >= r2) ? r1 : r2; return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n)); } //给Number类型增加一个add方法,,使用时直接用 .sub 即可完成计算。 Number.prototype.sub = function(arg) { return Subtr(this, arg); }; var $b = $(".b"); //亿 var $tm = $(".t-m"); //千万 var $m = $(".m"); //百万 var $hk = $(".h-k"); // ê?íò var $tk = $(".t-k"); // íò var $k = $(".k"); // ?§ var $h = $(".h"); // °ù var $t = $(".t"); // ê? var $single = $(".single"); // ?? var $td = $(".t-d"); // ê????? var $hd = $(".h-d"); // °ù???? var $comma = $(".comma.sign"); var $dot = $(".dot.sign"); var $bigMap = $(".big-map"); var data = { numbers: ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"], targetClass: { "b": $b, "tm": $tm, "m": $m, "hk": $hk, "tk": $tk, "k": $k, "h": $h, "t": $t, "single": $single, "td": $td, "hd": $hd }, zero: { b: 0, tm: 0, m: 0, hk: 0, tk: 0, k: 0, h: 0, t: 0, single: 0, td: 0, hd: 0 }, numbersTmp: "" }; (function() { function numberDiv(num) { return "
" + num + "
"; } for (var i = 0; i < 10; i++) { data.numbersTmp += numberDiv(i); } $(".price-div .number").append("
" + data.numbersTmp + "
"); })(); function priceToObj(price) { if (price == 0) { return data.zero; } var obj = {}; obj.hd = parseInt((price.mul(100)) % 10); obj.td = parseInt((price.mul(10)) % 10); obj.single = parseInt(price % 10); obj.t = parseInt((price.div(10)) % 10); obj.h = parseInt((price.div(100)) % 10); obj.k = parseInt((price.div(1000)) % 10); obj.tk = parseInt((price.div(10000)) % 10); obj.hk = parseInt((price.div(100000)) % 10); obj.m = parseInt((price.div(1000000)) % 10); obj.tm = parseInt((price.div(10000000)) % 10); obj.b = parseInt((price.div(100000000)) % 10); return obj; } function objToPrice(obj) { return obj.b.mul(100000000) .add(obj.tm.mul(10000000)).add(obj.m.mul(1000000)) .add(obj.hk.mul(100000)).add(obj.tk.mul(10000)) .add(obj.k.mul(1000)).add(obj.h.mul(100)) .add(obj.t.mul(10)).add(obj.single) .add(obj.td.div(10)).add(obj.hd.div(100)); } function animateQueue() { locking = false; if (eventQueue.length > 0) { eventQueue.shift()(); } } $.fn.extend({ scrollToNumber: function(num, pos) { var $this = $(this); var target = data.numbers[num]; $this.find(".numbers-view").stop(true, true); var top = num * $this.find(".zero").height(); var currentTop = -parseFloat($this.find(".numbers-view").css("marginTop").split("px")[0]); if (top == currentTop) { return; } else if (currentTop < top) { $this.find(".numbers-view").animate({ marginTop: -top }, 1500, "swing"); } else { $this.find(".numbers-view").append($(data.numbersTmp).addClass("temp")); top = $this.find("." + target + ".temp").offset().top - $this.find(".numbers-view").offset().top; $this.find(".numbers-view").animate({ marginTop: -top }, 1500, "swing", function() { if ($this.find(".zero").size() > 1) { var top = $this.find("." + target + ":not(.temp)").first().offset().top - $this.find(".numbers-view").offset().top; $this.find(".numbers-view").css({ marginTop: -top }); $this.find(".numbers-view .temp").remove(); } }); } } }) $.animateToPrice = function(price) { var obj = priceToObj(price); $.each(obj, function(key, value) { data.targetClass[key].scrollToNumber(value, key); }); }; var number = 0; function startnum() { number = number + parseFloat(Math.floor(Math.random() * 10)); $.animateToPrice(number); } $(function() { setInterval("startnum()", 3000) })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery数字显示-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jquery滚动数字显示
placeholder属性在IE中失效的解决办法
导航栏文字底部下划线css动画
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
993
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值