千位分隔符，音频音量加强，transform 垂直居中

1、最近做阴阳师日本官网，其中有个功能是获取预约人数，设计稿上的人数是这样151,567,000，想了想自己写还有点麻烦，于是网上copy了代码，再修改了下。

其中，有一点需要注意的是：函数中的str是字符串，所以需要把数字进行转成字符串，再传值。

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
function formatNum(str) {
    var newStr = "",
        count = 0;
 
    if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
                newStr = str.charAt(i) + "," + newStr;
            } else {
                newStr = str.charAt(i) + newStr;
            }
            count++;
        }
        str = newStr + ".00"; //自动补小数点后两位
    } else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
                newStr = str.charAt(i) + "," + newStr;
            } else {
                newStr = str.charAt(i) + newStr; //逐个字符相接起来
            }
            count++;
        }
        str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
    }
    return newStr;
}
 
// 引用
var appointCount = 15834,
    str = appointCount.toString(); //把数字进行转成字符串
 
$('#Jcount').html(formatNum(str));

2、js实现音频音量逐渐变大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var JbgAudio = $('#Jnav .jvedio').find("audio")[0];
 
function setVolumeUp(){
    var ID = setInterval(function(){
        var volume = JbgAudio.volume  + 0.1;
 
        if(volume >=1){
            JbgAudio.volume = 1;
            clearInterval(ID);
        }else{
            JbgAudio.volume =  volume;
        }
    },100)
}
 // 需要的地方调用
setVolumeUp()

3、CSS3实现元素垂直居中

1
2
3
4
5
6
7
8
9
10
.center{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

写在最后：暂时总结这么多，有时间再补充，O(∩_∩)O

posted @ 2017-08-30 14:46  莫笑我胡为  阅读(173)  评论(0)    收藏  举报