type.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

<body>
    <button id="jiarizhi">增加日志</button>
    <span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

</body>
<script>
    let pause = true;
    const outputConfig = [true, true, true, true, true]
    let curOutputIndex = 0;
    const options = {
        strings: [
            '开始生成',
            '',
            '',
            '',
            '',
            '结束生成'
        ],
        typeSpeed: 100, // 打印速度
        startDelay: 0, // 开始之前的延迟300毫秒
        loop: false, // 是否循环
        onStop: (arrayPos, self) => {
            console.log(arrayPos, self)
        },
        onComplete: (self) => {
            console.log(self)
        },
        onStart: (arrayPos, self) => {
            console.log(arrayPos, self)
        },
        onStringTyped: (arrayPos, self) => {
            console.log(arrayPos, self)
            // typed.typeSpeed = 0  // 在这里改速度
            curOutputIndex = arrayPos + 1
            if (outputConfig[arrayPos]) {
                // outputConfig[arrayPos] = false
                self.stop()
            }
            if (outputConfig[curOutputIndex]) {
                self.typeSpeed = 100
            }else{
                self.typeSpeed = 0
            }
        },
    };
    const typed = new Typed('#typed', options);
    // setTimeout(() => {
    //     typed.typeSpeed = 0
    // }, 1000);
    setTimeout(() => {
        // 如果接口拿到了值,但是前面的没跑完
        // typed.strings = [
        //     '开始生成',
        //     '开始生成11111111',
        //     '开始生成11111111',
        //     '开始生成11111111',
        //     '开始生成11111111',
        //     '开始生成11111111结束生成'
        // ];
        addOutput(1, '11111')
        typed.start();
    }, 200);
    setTimeout(() => {
        // 如果接口拿到了值,但是前面的没跑完
        // typed.strings = [
        //     '开始生成',
        //     '开始生成11111111',
        //     '开始生成11111111',
        //     '开始生成11111111',
        //     '开始生成11111111',
        //     '开始生成11111111结束生成'
        // ];
        addOutput(2, '222222')
        typed.start();
    }, 2000);
    // outputIndex表示第几个需要输出的日志
    function addOutput(outputIndex, value) {
        if (curOutputIndex < outputIndex) {
            typed.typeSpeed = 0
        } else {
            typed.typeSpeed = 100
        }
        for (let i = 0; i < outputIndex; i++) {
            outputConfig[i] = false
        }
        typed.strings[outputIndex] = typed.strings[outputIndex - 1] + value
    }
    function setSpeed() {

    }
</script>

</html>
posted @ 2024-08-20 00:31  xiaokongwzf  阅读(22)  评论(0)    收藏  举报