• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

padStart padEnd方法的使用

开发技术 开发技术 8小时前 6次浏览

padStart()方法用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。

padEnd()  方法会用一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。从当前字符串的末尾(右侧)开始填充。

第一个参数是位数,第二个参数是用什么补位

注意:只有字符串能使用该方法

padStart padEnd方法的使用

结果:

padStart padEnd方法的使用

应用:

例如在日期或者时间上补零

倒计时案例

<!DOCTYPE html>
<html>

<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title></title>
</head>

<body>
    <div id=’app’>
        <button @click=”start”>开始</button>
        <button @click=’end’>停止</button>
        {{ time | formatTime(‘hh:mm:ss’)}}
    </div>

    <script>
        Vue.filter(“formatTime”, function (data, format) {
            return format.replace(“hh”, parseInt((data / 60 / 60)).toString().padStart(2, 0)).replace(“mm”, parseInt((data / 60 % 60)).toString().padStart(2, 0)).replace(“ss”, (data % 60).toString().padStart(2, 0))
        })
        const vm = new Vue({
            el: ‘#app’,
            data: {
                time: 36000,
                timer: null,
                flag: false
            },
            methods: {
                start() {
                    // 检测定时器是否存在
                    if (this.timer) return;

                    //禁用
                    this.flag = !this.flag;

                    this.timer = setInterval(() => {
                        if (this.time > 0) {
                            this.time–
                        } else {
                            clearInterval(this.timer)
                        }

                    }, 1000)
                },
                end() {
                    this.flag = !this.flag;
                    clearInterval(this.timer)
                    this.timer = null;
                }
            },
        })

    </script>
</body>

</html>

 


程序员灯塔
转载请注明原文链接:padStart padEnd方法的使用
喜欢 (0)