JavaScript实现打字机效果

最新推荐文章于 2024-07-22 10:31:36 发布

益生菌冻干粉

最新推荐文章于 2024-07-22 10:31:36 发布

阅读量660

点赞数

分类专栏：大前端文章标签： javascript 打字机效果

本文链接：https://blog.csdn.net/Cheng_XZ/article/details/107876267

版权

大前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

html代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <main>
        <h1>
            <span>A developer platform for building </span>
            <span id="text" data-text='["web","mobile","desktop","game","loT","all your"]'></span>
            <span class="mark"></span>
            <span>apps</span>
        </h1>
    </main>
    <script src="index.js"></script>
</body>

</html>

css代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    display: flex;
    background-color: #2f3542;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

h1 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 500;
}

.mark {
    border-right: 2px solid #ffffff;
    animation: blink 0.6s step-end infinite;
}

@keyframes blink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #ffffff;
    }
}

js代码

const textEl = document.querySelector('#text');
const texts = JSON.parse(textEl.getAttribute('data-text'));

let index = 0;
let charIndex = 0;
let delta = 200;

let start = null;
let flag = false;

function type(time) {
    window.requestAnimationFrame(type);
    if (!start) {
        start = time;
    }
    let progress = time - start;

    if (progress > delta) {
        let text = texts[index];
        if (!flag) {
            textEl.innerHTML = text.slice(0, ++charIndex);
            // delta = 500 - Math.random() * 400;
            delta = 200;
        } else {
            textEl.innerHTML = text.slice(0, charIndex--);
        }

        start = time;

        if (charIndex === text.length) {
            flag = true;
            delta = 200;
            start = time + 1200;
        }
        if (charIndex < 0) {
            flag = false;
            start = time + 200;
            index = ++index % texts.length;
        }
    }
}
window.requestAnimationFrame(type);