当前位置：首页 > PHP

php实现打字效果

2026-03-13 10:01:59PHP

实现打字效果的方法

在PHP中实现打字效果可以通过多种方式完成，以下是一些常见的方法：

使用JavaScript配合PHP输出

PHP本身是服务器端语言，无法直接实现动态打字效果，但可以结合JavaScript实现。以下是一个示例代码：

<?php
$text = "这是要逐字显示的文字内容";
?>

<!DOCTYPE html>
<html>
<head>
    <title>打字效果</title>
    <script>
        function typeWriter(text, elementId, speed) {
            let i = 0;
            const element = document.getElementById(elementId);

            function typing() {
                if (i < text.length) {
                    element.innerHTML += text.charAt(i);
                    i++;
                    setTimeout(typing, speed);
                }
            }

            typing();
        }
    </script>
</head>
<body>
    <div id="typedText"></div>

    <script>
        typeWriter("<?php echo $text; ?>", "typedText", 100);
    </script>
</body>
</html>

纯PHP实现的简单打字效果

虽然不推荐，但可以通过刷新页面实现简单的打字效果：

<?php
$text = "这是要逐字显示的文字内容";
$length = isset($_GET['length']) ? $_GET['length'] : 0;

if ($length < strlen($text)) {
    echo substr($text, 0, $length + 1);
    $length++;
    echo '<meta http-equiv="refresh" content="0.1;url=?length='.$length.'">';
} else {
    echo $text;
}
?>

使用CSS动画实现

CSS也可以实现类似的打字效果，但需要固定宽度：

php实现打字效果

<?php
$text = "这是要逐字显示的文字内容";
?>

<style>
    .typing {
        width: <?php echo strlen($text) * 1.2; ?>ch;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        animation: typing 2s steps(<?php echo strlen($text); ?>), blink 0.5s step-end infinite alternate;
    }

    @keyframes typing {
        from { width: 0 }
    }

    @keyframes blink {
        50% { border-color: transparent }
    }
</style>

<div class="typing"><?php echo $text; ?></div>