快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

2、html布局和css樣式

本功能并沒有復(fù)雜的樣式顯示，所以布局只是用了一個(gè)div元素，而為了還原需求，將背景設(shè)置為黑底，文字設(shè)置為白色，更有一種自動(dòng)打字機(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ù)定義一個(gè)最終顯示的字符串；需要定義獲取dom的變量；需要定義一個(gè)索引變量，用于不但累加計(jì)算；需要定義定時(shí)打字的變量，用于setTimeout的方法定義，以實(shí)現(xiàn)真實(shí)打字的場(chǎng)景特效；需要提前定義一個(gè)獲取字符串長(zhǎng)度的變量；需要定義每個(gè)階段顯示的字符串的變量；這里共定義了6個(gè)變量，代碼如下：

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

4、動(dòng)效過程解析

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

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

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

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

而這只是第1個(gè)文字，想要實(shí)現(xiàn)不斷累加，就得有個(gè)回調(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>自動(dòng)打字機(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>

6、結(jié)語(yǔ)

我們一年又一年的生活著，很多時(shí)候覺得沒有壓力，甚至也不知道自己未來(lái)應(yīng)該做點(diǎn)什么。就像這個(gè)遞歸函數(shù)，只是被一些人控制著，周而復(fù)始，我們甚至忘記了思考。

有時(shí)候需要一個(gè)閾值，停下來(lái)讓我們想一想，可能你還是沒有想到什么

到此這篇關(guān)于JS實(shí)戰(zhàn)例子之實(shí)現(xiàn)自動(dòng)打字機(jī)動(dòng)效的文章就介紹到這了,更多相關(guān)JS自動(dòng)打字機(jī)動(dòng)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: