-
Notifications
You must be signed in to change notification settings - Fork 0
/
number_increase_effect.html
72 lines (69 loc) · 1.84 KB
/
number_increase_effect.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>number_increase_effect</title>
<style>
#num{
font-size: 24px;
color: orange;
}
</style>
</head>
<body>
<p><span id="num">0</span></p>
<label>input a number : </label><input type="text">
<button id="start">start</button>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.0.min.js"></script>
<script>
$(function(){
$("#start").on("click",function(){
numIncrease($("#num"),parseFloat($("input").val()));
});
function numIncrease(obj,num){
var iNegStr = "";
var iDec = num.toString().split(".")[1];
var iDecLen = 0;
if(num < 0){
num = -num;
iNegStr = "-";
}
if(iDec){
iDecLen = iDec.length;
}
var i = 0;
var timer = setInterval(function(){
if(i<=100){
//console.log(i,i/100*num,numStrToShow(i/100*num));//
obj.text(numStrToShow(i/100*num));
i+=5;
}else{
clearInterval(timer);
obj.text(numStrToShow(num));
}
},15);
function numStrToShow(num){
var numStr = num.toString().split("."),
numStrInt = numStr[0],
numStrDec = "",
numStrIntLen = numStrInt.length,
numStrIntSplit = numStrIntLen%3,
numStrIntRe = [];
if(iDec){
var numStrDec = "."+numStr[1];
if(numStrDec && numStrDec.length > iDecLen+1) {
numStrDec = numStrDec.slice(0,iDecLen+1);
}
}
if(numStrIntSplit !== 0) numStrIntRe.push(numStrInt.slice(0,numStrIntSplit));
for(var i = numStrIntSplit ; i < numStrIntLen ; i+=3){
numStrIntRe.push(numStrInt.slice(i,i+3));
}
return iNegStr+numStrIntRe.join(",")+numStrDec;
}
}
});
</script>
</body>
</html>