类似chat-gpt的打字机效果

类似chat-gpt的打字机效果

展示效果:

实现思路:只要控制显示内容的长度就行了,每次加一点显示内容,然后一直播放闪烁动画,加载完了就停掉动画。

结论:单个字逐渐加载 + 闪烁动画 = 打字机效果

闪烁动画实现

通过css实现

css 复制代码
.cursor {
    position: absolute;
    display: inline-block;
    width: 2px;
    height: 16px;
    background-color: #000;
    animation: blink 1s infinite;
    transform: translate(2px, 3px);
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

展现效果:

完整代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果</title>
    <style>
        .cursor {
            position: absolute;
            display: inline-block;
            width: 2px;
            height: 16px;
            background-color: #000;
            animation: blink 1s infinite;
            transform: translate(2px, 3px);
        }

        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }
        .box1 {
            line-height: 22px;
            width: 300px;
            font-size: 16px;
            padding: 10px;
            border: 1px solid pink;
            margin-bottom: 10px;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <span class="cursor"></span>
    </div>
    <button class="btn">添加文字</button>
    <script>
        const randomTextArr = ["萨嘎", '三', "agas", '大厦', '阿萨法施工', 'saf', '啊', '收到', '三个哈哈哈', '阿事实上事实上事实上', '事实上事实上少时诵诗书', '叫哦大家搜狗号度搜化工三打哈干撒的很尬山东干红手打很尬搜哈', '时间几节课MVvvvvvvvvvv啪啪啪啪啪啪PPT科技我IQ和瓦暖气,你', '撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊就你跟贵公司懂法守法收入与武器我先把发发花洒就你跟贵公司懂法守法收入与武器我先把发发花洒'];
        const box1 = document.querySelector('.box1');
        const btn = document.querySelector('.btn');
        let showText = '';
        let addTextArr = [];
        let timer = null;

        btn.onclick = () => {
            getRandomText();
            updateText();
        }

        function getRandomText() {
            const randomTextArrLength = randomTextArr.length;
            let randomNum = Math.random();
            let addText = randomTextArr[Math.floor(Math.random() * randomTextArrLength)];
            addTextArr.push(addText);
            console.log(addText)
        }

        function updateText() {
            let index = 0;
            if (!timer) {
                timer = setInterval(() => {
                    if (addTextArr.length > 0) {
                        if (index < addTextArr[0].length) {
                            box1.innerHTML = showText + addTextArr[0][index] + `<span class="cursor"></span>`;
                            showText += addTextArr[0][index];
                            index ++;
                        } else {
                            index = 0;
                            box1.innerHTML = showText;
                            addTextArr.shift();
                        }
                    } else {
                        clearInterval(timer);
                        timer = null;
                    }
                }, 50)
            }
        }
    </script>
</body>
</html>
相关推荐
翻滚吧键盘42 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架