• 千位分隔符,音频音量加强,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

  • 相关阅读:
    表单
    框架
    表格
    列表
    标签
    封装类(包装类)
    常见类 --Object
    日志
    异常
    选择结构
  • 原文地址:https://www.cnblogs.com/moxiaowohuwei/p/7453087.html
Copyright © 2020-2023  润新知