快捷導(dǎo)航

JS實(shí)戰(zhàn)例子之實(shí)現(xiàn)自動打字機(jī)動效

更新時間：2023年01月28日 16:23:44 作者：經(jīng)海路大白狗

什么是打字機(jī)效果呢?打字機(jī)效果即為文字逐個輸出,實(shí)際上就是一種Web動畫,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)戰(zhàn)例子之實(shí)現(xiàn)自動打字機(jī)動效的相關(guān)資料,需要的朋友可以參考下

前言

前幾天遇到一個需求，產(chǎn)品告訴我說，希望這些字可以像自動打字那樣，一個一個的出來，于是在完成需求的同時，順便把這個方法記錄出來，看大家是否也需要。

1、實(shí)現(xiàn)思路

首先這個需求的目的是實(shí)現(xiàn)自動打字機(jī)效果，意思就是文字會一個一個出來，而且文字的最終顯示提前已經(jīng)固定，或者是已經(jīng)獲取完成了；

然后就需要每次將文字字符串拆開，每次比上一次多顯示一個文字，并且清除掉上一次的顯示；

每次累加要顯示的文字，必定有個累加的過程，這里就需要用到遞歸顯示，而遞歸的重要點(diǎn)在于閾值停止，所以累加的索引和字符串的長度應(yīng)該有一個判斷，以停止繼續(xù)執(zhí)行遞歸。

2、html布局和css樣式

本功能并沒有復(fù)雜的樣式顯示，所以布局只是用了一個div元素，而為了還原需求，將背景設(shè)置為黑底，文字設(shè)置為白色，更有一種自動打字機(jī)的科技感，代碼如下：

<div class="word"></div>
 
<style>
    body {
       background: #000;
    }
    .word {
       margin: 100px;
       width: 500px;
       height: 30px;
       padding: 2px 10px;
       font-size: 26px;
       color: #FFF;
       font-weight: bold;
    }
</style>

3、預(yù)定義前置變量

需要預(yù)定義一個最終顯示的字符串；需要定義獲取dom的變量；需要定義一個索引變量，用于不但累加計(jì)算；需要定義定時打字的變量，用于setTimeout的方法定義，以實(shí)現(xiàn)真實(shí)打字的場景特效；需要提前定義一個獲取字符串長度的變量；需要定義每個階段顯示的字符串的變量；這里共定義了6個變量，代碼如下：

var wordStr = '2023年，喜迎新春，玉兔吉祥';
var wordDom = document.querySelector('.word');
 
var num = 0;
var wordTimeout = null;
var wLength = wordStr.length;
var showWord = '';

4、動效過程解析

既然是模擬打字效果，咱們定義的字符串是“2023年，喜迎新春，玉兔吉祥”，所以顯示過程肯定是：第一次顯示“2”，第二次顯示“20”，第三次顯示“202”，以此類推，通過上一步預(yù)定義的num值累加，最終將字符串全部顯示出來，所以第一步代碼應(yīng)該是：

showWord += wordStr.charAt(num);
wordDom.innerHTML = showWord;

此時num值為0，通過字符串的charAt獲取固定索引的字符，也就是“2” ，但既然要模擬真實(shí)打字效果，打字都是需要時間的，所以，我們加上setTimeout函數(shù)，有個演示打字效果：

wordTimeout = setTimeout(() => {
     showWord += wordStr.charAt(num);
     wordDom.innerHTML = showWord;
}, 300)

而這只是第1個文字，想要實(shí)現(xiàn)不斷累加，就得有個回調(diào)，用于源源不斷的累加，計(jì)算，渲染顯示：

function autoWord() {
    wordTimeout = setTimeout(() => {
       showWord += wordStr.charAt(num);
       wordDom.innerHTML = showWord;
       num++;
 
       autoWord();  // 遞歸調(diào)用
    }, 300)
}
autoWord();

而遞歸的重點(diǎn)在于源源不斷，閾值而停

if (num < wLength) {
   autoWord();
} else {
   window.clearTimeout(wordTimeout);
   wordTimeout = null;
}

5、完整源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動打字機(jī)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #000;
        }
        .word {
            margin: 100px;
            width: 500px;
            height: 30px;
            padding: 2px 10px;
            font-size: 26px;
            color: #FFF;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="word"></div>
 
    <script>
        var wordStr = '2023年，喜迎新春，玉兔吉祥';
        var wordDom = document.querySelector('.word');
 
        var num = 0;
        var wordTimeout = null;
        var wLength = wordStr.length;
        var showWord = '';
 
        function autoWord() {
            wordTimeout = setTimeout(() => {
                showWord += wordStr.charAt(num);
                wordDom.innerHTML = showWord;
                num++;
 
                if (num < wLength) {
                    autoWord();
                } else {
                    window.clearTimeout(wordTimeout);
                    wordTimeout = null;
                }
            }, 300)
        }
        autoWord();
        
    </script>
</body>