jquery数字显示

Html

Css

#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);
};

//给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 "<div class='" + data.numbers[num] + "'>" + num + "</div>";
    }

for (var i = 0; i < 10; i++) {
        data.numbersTmp += numberDiv(i);
    }

$(".price-div .number").append("<div class='numbers-view'>" + data.numbersTmp + "</div>");
})();

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

立即下载

jquery数字显示



代码描述：jquery滚动数字显示

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

李迎风

相关代码

jquery数字显示

最新