html手写一个打印机效果-从最基础到学会

手写一个打印机效果

啥叫打印机效果，话不多说，直接上效果。我们可以自己写入一段文本然后通过html的方式，让它跟打印机一样，一个一个的打印到页面，并且还可以一个一个的删除。在这里我先浅说一下，我们的实现技巧，定时器setTimeout控制时间,然后for循环遍历写入到页面上。

封装的打印js
main(str,text)直接传入要写入的数组对象和要写入的元素。
copy.js 下载到本地引入然后调用它就可以了

代码

先拿到我们要写入的元素，然后设置好我们要写入的内容。

 var text = document.querySelector('.text');
var str = ['你好 ,我是一名刚入坑不久的大三在校生。', '现在学习都是为了将来的工作。', '希望能够得到大家的鼓励，谢谢！']

基础代码一

首先这里，我们先实现一个只有一段文字的实现效果。实现思路就是通过计时器，控制好时间,每次写入的文字通过str[0].substr(0, k)拿到,需要注意的是，因为是异步任务，回退的时候，我们的时间要设置好，加上写入完的时间1000 + 200 * str[0].length)。

  写入
for (let j = 0; j < str[0].length; j++) {
// 使用 setTimeout 函数来实现每个字符的延时输出
setTimeout(() => {

            text.innerHTML = str[0].substr(0, j) // 显示当前字符串的前 j 个字符

        }, 200 * j) // 延迟时间为 200 毫秒乘以 j，即每个字符间隔 200 毫秒

    }

// 回退
// 在所有字符输出完成后，等待 1000 毫秒后开始回退
setTimeout(() => {
for (let k = str[0].length, i = 0; k >= 0; k--, i++) {
// 使用 setTimeout 函数来实现每个字符的延时输出
setTimeout(() => {

                text.innerHTML = str[0].substr(0, k) // 显示当前字符串的前 k 个字符

            }, 200 * i) // 延迟时间为 200 毫秒乘以 i，即每个字符间隔 200 毫秒

        }

    }, 1000 + 200 * str[0].length) // 等待时间为 1000 毫秒加上所有字符输出的延时时间

基础代码二 错误代码

首先这个代码是错误的
为了能让大家更好的看到错误的效果，于是我把这个代码也上传了。大家可以看到，在这里，页面上的文字总是会莫名奇怪的出现删除，根本不是我们想要的。其实我们也只是对上面一个代码进行了一个for循环遍历，却出现了这样的效果。其实这导致的原因就是setTimeout是异步任务，时间没有控制好。即每个字符串的打印和删除都是异步任务，无法保证它们的执行顺序。因此，可能会出现多个字符串的打印和删除任务交错执行的情况，导致效果不符合预期。

 // 即每个字符串的打印和删除都是异步任务，无法保证它们的执行顺序。因此，可能会出现多个字符串的打印和删除任务交错执行的情况，导致效果不符合预期。
// 整个str 这是一个有问题的代码 因为计算时间太麻烦了 都是异步任务
// for (let s = 0; s < str.length; s++) {
//     // 写入
//     for (let j = 0; j < str[s].length; j++) {
//         setTimeout(() => {
//             text.innerHTML = str[s].substr(0, j)
//         }, 200 * j)
//     }
//     // 回退
//     setTimeout(() => {
//         for (let k = str[s].length, i = 0; k >= 0; k--, i++) {
//             setTimeout(() => {
//                 text.innerHTML = str[s].substr(0, k)
//             }, 200 * i)

//         }
//     }, 1000 + 200 * str[s].length)
// }

基础代码三

为了解决上面的问题，我们使用了函数封装并且使用了回调函数实现我们想要的效果。我们将打印和删除都封装成一个含有回调函数的函数，为什么要含有回调函数呢？这是为了我们下面对一个字符串打印和删除的函数做封装。打我们打印完一个字符串时，我们才会执行删除。所有我们将删除函数放到打印的回调函数中去执行。然后我们将打印整个字符串数组进行封装，因为我们在删除的里面也有一个回调函数，那么我们可以在这个回调函数里去执行打印下一条字符串，这样就防止了控制时间不准确的问题。

 // 打印字符串
function printText(str, callback) {
var i = 0;
var timer = setInterval(function () {

            text.innerHTML = str.substr(0, i); // 将字符串的前缀赋值给显示文本的元素

            i++;
if (i > str.length) { // 如果已经打印完整个字符串
clearInterval(timer); // 停止定时器

                callback && callback(); // 调用回调函数

            }

        }, 200); // 每 200 毫秒打印一个字符

    }

// 删除字符串
function deleteText(str, callback) {
var i = str.length;
var timer = setInterval(function () {

            text.innerHTML = str.substr(0, i); // 将字符串的前缀赋值给显示文本的元素

            i--;
if (i < 0) { // 如果已经删除到空字符串
clearInterval(timer); // 停止定时器

                callback && callback(); // 调用回调函数

            }

        }, 200); // 每 200 毫秒删除一个字符

    }

// 打印和删除字符串
function printAndDeleteText(str, callback) {
printText(str, function () { // 先打印字符串
setTimeout(function () {
deleteText(str, callback); // 等待 1 秒后再删除字符串

            }, 1000);

        });

    }

// 循环遍历字符串数组，依次打印和删除字符串
function printAndDeleteAllText(strArr) {
function printAndDeleteNext(i) {
if (i >= strArr.length) { // 如果已经处理完所有字符串
printAndDeleteNext(0); // 重新从头开始处理

            } else {
printAndDeleteText(strArr[i], function () { // 先打印字符串

                    i++;
printAndDeleteNext(i); // 递归调用自身，处理下一个字符串

                });

            }

        }
printAndDeleteNext(0); // 开始处理第一个字符串

    }
// 开始打印和删除字符串数组中的所有字符串
printAndDeleteAllText(str)

最优代码

其实我们做了，这么多，最后就是为了解决异步任务。
所以我这里直接采用Promise和async await解决上面的问题。我们通过Promise解决实现打印和删除的异步任务。我们通过async await封装整个运行函数，解决了定时器异步问题，不用再计算时间，又难有算不出来。

 // 最终版 封装 解决异步任务
function writeText(t, delay = 200) {
return new Promise((resolve, reject) => {
setTimeout(() => {

                text.innerHTML = t; // 显示当前字符串 t
resolve(); // Promise 完成

            }, delay) // 延迟 delay 毫秒后执行

        })

    }

async function main(str) {
while (true) { // 无限循环
for (let j = 0; j < str.length; j++) {
// 写入
for (let i = 0; i <= str[j].length; i++) {
await writeText(str[j].substr(0, i)) // 显示当前字符串的前 i 个字符

                }
// 回退
// 回退前先等一秒
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(); // 等待 1000 毫秒后 Promise 完成

                    }, 1000) // 等待 1000 毫秒

                })
for (let i = str[j].length; i >= 0; i--) {
await writeText(str[j].substr(0, i), 200) // 显示当前字符串的前 i 个字符，间隔 200 毫秒

                }

            }

        }

    }
main(str)

源码

<!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>

        .container {

            display: flex;

            /* 使用 flex 布局 */

            flex-direction: column;

            /* 垂直布局 */

            align-items: center;

            /* 水平居中 */

            justify-content: center;

            /* 垂直居中 */

            height: 100vh;

            /* 高度占满整个视口 */

        }


        h1 {

            font-size: 3rem;

            /* 字体大小 */

            margin-bottom: 2rem;

            /* 底部间距 */

            text-align: center;

            /* 居中对齐 */

        }


        .text {

            font-size: 2rem;

            /* 字体大小 */

            font-weight: bold;

            /* 字体加粗 */

            text-align: center;

            /* 居中对齐 */

            border-right: 2px solid black;

            /* 添加光标效果 */

            white-space: nowrap;

            /* 不换行 */

            overflow: hidden;

            /* 隐藏超出部分 */

            animation: blink 0.5s step-end infinite;

            /* 添加光标闪烁效果 */

            height: 3rem;

            /* 设置一个固定的高度 */

        }



        @keyframes blink {


            from,

            to {

                border-color: transparent;

                /* 透明边框颜色 */

            }


            50% {

                border-color: black;

                /* 黑色边框颜色 */

            }

        }

    </style>

</head>


<body>

    <div class="container">

        <h1>逐字打印和删除文字效果</h1>

        <p class="text"></p>

    </div>

</body>

<script>

    var text = document.querySelector('.text');

    var str = ['你好 ,我是一名刚入坑不久的大三在校生。', '现在学习都是为了将来的工作。', '希望能够得到大家的鼓励，谢谢！']



    // 写入

    // for (let j = 0; j < str[0].length; j++) {

    //     // 使用 setTimeout 函数来实现每个字符的延时输出

    //     setTimeout(() => {

    //         text.innerHTML = str[0].substr(0, j) // 显示当前字符串的前 j 个字符

    //     }, 200 * j) // 延迟时间为 200 毫秒乘以 j，即每个字符间隔 200 毫秒

    // }


    // // 回退

    // // 在所有字符输出完成后，等待 1000 毫秒后开始回退

    // setTimeout(() => {

    //     for (let k = str[0].length, i = 0; k >= 0; k--, i++) {

    //         // 使用 setTimeout 函数来实现每个字符的延时输出

    //         setTimeout(() => {

    //             text.innerHTML = str[0].substr(0, k) // 显示当前字符串的前 k 个字符

    //         }, 200 * i) // 延迟时间为 200 毫秒乘以 i，即每个字符间隔 200 毫秒

    //     }

    // }, 1000 + 200 * str[0].length) // 等待时间为 1000 毫秒加上所有字符输出的延时时间



    // 即每个字符串的打印和删除都是异步任务，无法保证它们的执行顺序。因此，可能会出现多个字符串的打印和删除任务交错执行的情况，导致效果不符合预期。

    // 整个str 这是一个有问题的代码 因为计算时间太麻烦了 都是异步任务

    // for (let s = 0; s < str.length; s++) {

    //     // 写入

    //     for (let j = 0; j < str[s].length; j++) {

    //         setTimeout(() => {

    //             text.innerHTML = str[s].substr(0, j)

    //         }, 200 * j)

    //     }

    //     // 回退

    //     setTimeout(() => {

    //         for (let k = str[s].length, i = 0; k >= 0; k--, i++) {

    //             setTimeout(() => {

    //                 text.innerHTML = str[s].substr(0, k)

    //             }, 200 * i)


    //         }

    //     }, 1000 + 200 * str[s].length)

    // }



    // 最终版 封装 解决异步任务

    function writeText(t, delay = 200) {

        return new Promise((resolve, reject) => {

            setTimeout(() => {

                text.innerHTML = t; // 显示当前字符串 t

                resolve(); // Promise 完成

            }, delay) // 延迟 delay 毫秒后执行

        })

    }


    async function main(str) {

        while (true) { // 无限循环

            for (let j = 0; j < str.length; j++) {

                // 写入

                for (let i = 0; i <= str[j].length; i++) {

                    await writeText(str[j].substr(0, i)) // 显示当前字符串的前 i 个字符

                }

                // 回退

                // 回退前先等一秒

                await new Promise((resolve, reject) => {

                    setTimeout(() => {

                        resolve(); // 等待 1000 毫秒后 Promise 完成

                    }, 1000) // 等待 1000 毫秒

                })

                for (let i = str[j].length; i >= 0; i--) {

                    await writeText(str[j].substr(0, i), 200) // 显示当前字符串的前 i 个字符，间隔 200 毫秒

                }

            }

        }

    }

    main(str)

</script>


</html>