数字动画效果

最新推荐文章于 2021-07-14 18:26:38 发布

原创最新推荐文章于 2021-07-14 18:26:38 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript实现的数字滚动显示动画案例，详细展示了如何通过DOM操作和动画效果来展示不断变化的数值，适用于计数器等场景。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">

#container .flip1{
/*background: black;*/
/*min-width: 600px;*/
/*height:100px;*/
/*border:1px solid red;*/
/*float:left;*/
width:49%;
/*margin:0 12%;*/
display:inline-block;
text-align:center;
margin:0 auto;

}
#container .flip1 p{color:#fff;text-align:center;font-size:18px;}
#container .flip2 p{color:#fff;text-align:center;font-size:18px;}
#container .flip2{
/*background: black;*/
/*min-width: 600px;*/
/*height:100px;*/
/*border:1px solid red;*/
/*margin:0 12%;*/
/*border:1px solid yellow;*/
/*float:left;*/
width:49%;
display:inline-block;
text-align:center;
margin:0 auto;

/*text-align:center;*/
/*margin:0 auto;*/
}

/*.flip {*/
/*margin: 0 auto;*/
/* width: 500px;
height: 100px;
color: #42ffd6;*/
/* padding-top: 40px;*/
/*float:left;*/
/* width:45%;*/
/*}*/

.price-div {
font: 12px tahoma, Arial, Verdana, sans-serif;

}
.price-div1 {
font: 12px tahoma, Arial, Verdana, sans-serif;

}
.price-div > div,
.total-price > div {
text-align:center;
margin:0 auto;
display:inline-block;

}
.price-div1 > div,
.total-price > div {
text-align:center;
margin:0 auto;
display:inline-block;

}
.price-icon {
/*background: #283963;*/
/*width: 25px;*/
height: 30px;
line-height: 30px;
font-size: 18px;
margin-top:20px;
/*font-weight: bold;*/
/*text-align:center;*/
/*margin:0 auto;*/
/*display:inline-block;*/
/*float:left;*/
margin-right: 1px;
color:#ffffff;
}
.price-icon1 {
/*background: #283963;*/
/*width: 25px;*/

height: 30px;
line-height: 30px;
font-size: 18px;
margin-top:20px;
/*font-weight: bold;*/
/*text-align:center;*/
/*margin:0 auto;*/
/*display:inline-block;*/
/*float:left;*/
margin-right: 1px;
color:#ffffff;
}
.price-div .number {
background: #283963;
/*width: 32px;*/

height: 28px;
line-height: 28px;
font-size: 24px;
/*font-weight: bold;*/
overflow: hidden;
/*margin-right: 1px;*/
padding:2px;
margin:1px;
color:#ff7200;
text-align:center;
/* margin-left:2%;
margin-right:2%;*/
}
.price-div1 .number {
background: #283963;
/*width: 32px;*/

height: 28px;
line-height: 28px;
font-size: 24px;
/*font-weight: bold;*/
overflow: hidden;
/*margin-right: 1px;*/
padding:2px;
margin:1px;
color:#42ffd6;
text-align:center;
/* margin-left:2%;
margin-right:2%;*/
}
.price-div .sign {
/* font-size: 40px;
font-weight: bold;
line-height: 68px;
height: 48px;*/

/*background: #283963;*/
/*width: 32px;*/
/*height: 28px;
line-height: 28px;*/
font-size: 14px;
font-weight: bold;
overflow: hidden;
/*margin-right: 1px;*/
/*padding:2px;*/
color:#ff7200;
margin-top:30px;
}
.price-div1 .sign1 {
/* font-size: 40px;
font-weight: bold;
line-height: 68px;
height: 48px;*/

/*background: #283963;*/
/*width: 32px;*/
/*height: 28px;
line-height: 28px;*/
font-size: 14px;
font-weight: bold;
overflow: hidden;
/*margin-right: 1px;*/
/*padding:2px;*/
color:#42ffd6;
margin-top:30px;
}

</style>

</head>
<body style="background:#000000;">
<div class="cashes">

<div id="container">
<div class="flip flip1">


<div class="price-div">
<div class="price-icon">￥</div>
<div class="h-k number"></div>
<div class="t-k number"></div>
<div class="k number"></div>
<div class="comma sign">,</div>
<div class="h number"></div>
<div class="t number"></div>
<div class="single number"></div>

<div class="comma sign">,</div>
<div class="t-d number"></div>
<div class="h-d number"></div>

<div class="q-d number"></div>
<div class="comma sign">,</div>
<div class="b-d number"></div>
<div class="s-d number"></div>
<div class="y-d number"></div>

</div>

<div class="clear"></div>
<p>xxxx</p>

</div>


<div class="flip flip2">

<div class="price-div1">
<div class="price-icon1">￥</div>
<div class="h-k1 number"></div>
<div class="t-k1 number"></div>

<div class="k1 number"></div>
<div class="comma sign1">,</div>
<div class="h1 number"></div>
<div class="t1 number"></div>
<div class="single1 number"></div>


<div class="comma sign1">,</div>
<div class="t-d1 number"></div>
<div class="h-d1 number"></div>

<div class="q-d1 number"></div>
<div class="comma sign1">,</div>
<div class="b-d1 number"></div>
<div class="s-d1 number"></div>
<div class="y-d1 number"></div>

<div class="clear"></div>
</div>
<div class="clear"></div>
<p>xxx</p>
</div>


</div>

</div>

<script type="text/javascript">

/*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(".", ""));
var ab =(r1 / r2) * pow(10, t2 - t1);
return ab;
}
}
//给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 $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 $qian = $(".q-d");
var $bai = $(".b-d");
var $shi = $(".s-d");
var $yuan = $(".y-d");

//222
var $hk1 = $(".h-k1"); // Ê®Íò
var $tk1 = $(".t-k1"); // Íò
var $k1 = $(".k1"); // Ç§
var $h1 = $(".h1"); // °Ù
var $t1 = $(".t1"); // Ê®
var $single1 = $(".single1"); // ¸ö
var $td1 = $(".t-d1"); // Ê®·ÖÎ»
var $hd1 = $(".h-d1"); // °Ù·ÖÎ»
var $comma1 = $(".comma.sign1");
var $dot1 = $(".dot1.sign1");
var $bigMap1 = $(".big-map1");

var $qian1 = $(".q-d1");
var $bai1 = $(".b-d1");
var $shi1 = $(".s-d1");
var $yuan1 = $(".y-d1");

var data1 = {
numbers: ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine","ten","eleven","twelve","thirteen"],
targetClass: {
"hk": $hk,
"tk": $tk,
"k": $k,
"h": $h,
"t": $t,
"single": $single,
"td": $td,
"hd": $hd,

"qian":$qian,
"bai":$bai,
"shi":$shi,
"yuan":$yuan

},
zero: {
hk: 0,
tk: 0,
k: 0,
h: 0,
t: 0,
single: 0,
td: 0,
hd: 0,
qian:0,
bai:0,
shi:0,
yuan:0

},
numbersTmp: ""
};
//222
var data2 = {
numbers: ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine","ten","eleven","twelve","thirteen"],
targetClass: {
"hk": $hk1,
"tk": $tk1,
"k": $k1,
"h": $h1,
"t": $t1,
"single": $single1,
"td": $td1,
"hd": $hd1,
"qian":$qian1,
"bai":$bai1,
"shi":$shi1,
"yuan":$yuan1
},
zero: {
hk: 0,
tk: 0,
k: 0,
h: 0,
t: 0,
single: 0,
td: 0,
hd: 0,

qian:0,
bai:0,
shi:0,
yuan:0
},
numbersTmp: ""
};
(function (){
function numberDiv(num){
return "<div class='" + data1.numbers[num] + "'>" + num + "</div>";

}


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

for(var i = 0; i <10; i ++) {//222
data2.numbersTmp += numberDiv(i);//222
}//222
$(".price-div .number").append("<div class='numbers-view'>" + data1.numbersTmp + "</div>"); //div 中数值赋值
$(".price-div1 .number").append("<div class='numbers-view'>" + data2.numbersTmp + "</div>");//222
})();

function priceToObj(price,data){
if(price == 0) {
return data.zero;
}
var obj = {};
// obj.yuan = parseInt((price.div(100)) % 10);
// obj.shi = parseInt((price.div(10)) % 10);
// obj.bai = parseInt(price % 10);
// obj.qian = parseInt((price.div(100)) % 10);

// obj.hd = parseInt((price.mul(1000)) % 10);
// obj.td = parseInt((price.mul(10000)) % 10);
// obj.single = parseInt((price.div(100000)) % 10);
// obj.t = parseInt((price.div(1000000)) % 10);

// obj.h = parseInt((price.div(10000000)) % 10);
// obj.k = parseInt((price.div(100000000)) % 10);
// obj.tk = parseInt((price.div(1000000000)) % 10);
// obj.hk = parseInt((price.div(10000000000)) % 10);

obj.yuan = parseInt(price % 10);

var t1=price.div(10)>=1?price.div(10):0;
obj.shi = parseInt(t1 % 10);

var t2=price.div(100)>=1?price.div(100):0;
obj.bai = parseInt(t2 % 10);

var t3=price.div(1000)>=1?price.div(1000):0;
var v_qian = t3 % 10
obj.qian = parseInt(v_qian);

var t4=price.div(10000)>=1?price.div(10000):0;
var v_hd=t4% 10
obj.hd = parseInt(v_hd);

var t5=price.div(100000)>=1?price.div(100000):0;
var v_td=t5 % 10
obj.td = parseInt(v_td);

var t6=price.div(1000000)>=1?price.div(1000000):0;
var v_single=t6 % 10
obj.single = parseInt(v_single);

var t7=price.div(10000000)>=1?price.div(10000000):0;
var v_t=t7 % 10
obj.t = parseInt(v_t);



// obj.t = parseInt((price.div(10000000)) % 10);
var t8=price.div(100000000)>=1?price.div(100000000):0;
var v_h=t8 % 10
obj.h = parseInt(v_h);

// obj.h = parseInt((price.div(100000000)) % 10);

var t9=price.div(1000000000)>=1?price.div(1000000000):0;
var v_k=t9 % 10;
obj.k = parseInt(v_k);

// console.log('---------')
// console.log(t9)
// console.log(parseInt(v_k))

// obj.k = parseInt((price.div(1000000000)) % 10);

var t10=price.div(10000000000)>=1?price.div(10000000000):0;
var v_tk=t10 % 10;
obj.tk = parseInt(v_tk);

// obj.tk = parseInt((price.div(10000000000)) % 10);

var t11=price.div(100000000000)>=1?price.div(100000000000):0;
var v_hk=t11 % 10;
obj.hk = parseInt(v_hk);

// obj.hk = parseInt((price.div(100000000000)) % 10);
// obj.hk = 6;

return obj;
}

// function objToPrice(obj) {
// return obj.hk.mul(100000000000).add(obj.tk.mul(10000000000)).add(obj.k.mul(1000000000))
// .add(obj.h.mul(100000000)).add(obj.t.mul(10000000))
// .add(obj.single.mul(1000000)).add(obj.td.mul(100000))
// .add(obj.hd.mul(10000)).add(obj.qian.mul(1000))
// .add(obj.bai.mul(100)).add(obj.shi.mul(10))
// .add(obj.yuan.mul(1));
// }

// function animateQueue(){
// locking = false;
// if(eventQueue.length > 0) {
// eventQueue.shift()();
// }
// }

$.fn.extend({
scrollToNumber: function(num, pos,data){
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,data){
var obj = priceToObj(price,data);


$.each(obj, function(key, value){
// data.targetClass[key].scrollToNumber(value, key);
// alert(key);
var aa = data.targetClass;
// alert(aa);
var bb=aa[key];
bb.scrollToNumber(value, key,data);

});
};

// var number = 0;
// $(".animate-btn").on("click", function(){
// number = number + parseFloat((Math.random() * 1000).toFixed(2));
// $.animateToPrice(number);
// });
var number =0;
var number2 =0;//222
$.animateToPrice(number,data1);
$.animateToPrice(number2,data2);//222
setInterval(function (){

// $(".animate-btn").on("click", function(){

// number = number + parseFloat((Math.random() * 1000).toFixed(2)); // 每次增加的值
// number2 = number2 + parseFloat((Math.random() * 500).toFixed(2)); // 每次增加的值
number = number + Math.floor(Math.random() * 1000); // 每次增加的值
number2 = number2 + Math.floor(Math.random() * 500);
// number = number + parseFloat(1099999.44.toFixed(2));
$.animateToPrice(number,data1);
$.animateToPrice(number2,data2);//222
// });

},5000);

</script>

</body>
</html>