【Example】在输入框内输入文本，输出打字机效果

在输入框内输入文本，输出打字机效果

偶作
闲暇之余，
偶有感发，
一时之兴，
终得其果。

示例

• 在输入框内输入文本，输出打字机效果

1. HTML

1.1 首先要有一个可以输入得文本框

<textarea id="form-text" cols="30" rows="5" class="form-text" placeholder="请输入您要打印的文本内容！&#10;例如：这是一段打印信息！"></textarea>

1.2 还需要有一个可以触发得打字机效果的确定按钮

<button class="form-btn">确定</button>

1.3 接下来需要3个可以自由切换打字机打字输出方向的控制按钮

<button class="setting-btn horizontal-tb is-active">H</button>
<button class="setting-btn vertical-lr">L</button>
<button class="setting-btn vertical-rl">R</button>

1.4 最后需要一个可以承载和显示打字机效果的画布区域

<div class="text-print-warpper">
	<span class="text-print-content"></span><span class="event-style">|</span>
</div>

2. CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.warpper {
	width: 750px;
	margin: 0 auto;
}

2.1 调整输入框的样式

.form-warpper {
	margin: 20px 0;
}
.form-text {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid #EAEAEA;
    border-radius: 3px;
    caret-color: red;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
}
.form-text:hover,
.form-text:focus {
	border-color: #409EFF;
}

2.2 调整打字机确定按钮的样式

.form-btn {
	width: 100%;
	height: 32px;
	border: 1px solid #409EFF;
	border-radius: 3px;
	color: #FFF;
	background-color: #409EFF;
	cursor: pointer;
}
.form-btn:hover {
	opacity: .8;
}
.form-btn:active {
	opacity: 1;
}

2.3 调整打字机输出方向的控制按钮的样式

.setting-btn {
    padding: 5px 15px;
    border: 1px solid #EAEAEA;
    border-right-color: transparent;
    border-bottom-width: 0;
    background-color: transparent;
    cursor: pointer;
}
.setting-btn.horizontal-tb {
    border-top-left-radius: 3px;
}
.setting-btn.vertical-rl {
    border-top-right-radius: 3px;
    border-right-color: #EAEAEA;
}
.setting-btn.is-active {
    border-color: #409EFF;
    color: #FFF;
    background-color: #409EFF;
}

2.4 调整打字机画布的样式

.text-print-warpper {
    width: 100%;
    height: 350px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #000;
    border-radius: 3px;
    border-top-left-radius: 0;
    letter-spacing: 3px;
    color: #FFF;
    background-color: #000;
}
.text-print-warpper.vertical-lr {
    writing-mode: vertical-lr;
}
.text-print-warpper.vertical-rl {
    writing-mode: vertical-rl;
}
.text-print-warpper.horizontal-tb {
    writing-mode: horizontal-tb;
}

2.5 调整打字光标的样式

.event-style {
    color: #409EFF;
    animation: text cubic-bezier(0.18, 0.89, 0.32, 1.28) 1000ms infinite;
}
@keyframes text {
    from { visibility: visible; }
    to { visibility: hidden; }
}

3. JS

// 打字机画布区域
const text_print_warpper = document.querySelector('.text-print-warpper')
// 打字机输出的内容区域
const text_print_content = document.querySelector('.text-print-content')

3.1 获取输入框文本内容

const text = document.getElementById('form-text').value

3.2 绑定打字机确定按钮单击事件

const form_btn = document.querySelector('.form-btn')
form_btn.onclick = function () {
	printText(document.getElementById('form-text').value)
}

3.3 绑定打字机输出方向的控制按钮的单击事件

// 打字机 打字方向 从左向右 水平方向逐个打印
const horizontal_tb_btn = document.querySelector('.horizontal-tb')
// 打字机 打字方向 从左向右 垂直方向逐个打印
const vertical_lr_btn = document.querySelector('.vertical-lr')
// 打字机 打字方向 从右向左 垂直方向逐个打印
const vertical_rl_btn = document.querySelector('.vertical-rl')

horizontal_tb_btn.onclick = function () {
    horizontal_tb_btn.classList.add('is-active')
    vertical_lr_btn.classList.remove('is-active')
    vertical_rl_btn.classList.remove('is-active')
    text_print_warpper.setAttribute('class', 'text-print-warpper horizontal-tb')
    printText(document.getElementById('form-text').value)
}
vertical_lr_btn.onclick = function () {
    horizontal_tb_btn.classList.remove('is-active')
    vertical_lr_btn.classList.add('is-active')
    vertical_rl_btn.classList.remove('is-active')
    text_print_warpper.setAttribute('class', 'text-print-warpper vertical-lr')
    printText(document.getElementById('form-text').value)
}
vertical_rl_btn.onclick = function () {
    horizontal_tb_btn.classList.remove('is-active')
    vertical_lr_btn.classList.remove('is-active')
    vertical_rl_btn.classList.add('is-active')
    text_print_warpper.setAttribute('class', 'text-print-warpper vertical-rl')
    printText(document.getElementById('form-text').value)
}

3.4 打字机逐个打字方法

let timer = null
function printText(text) {
    text_print_content.innerHTML = ''
    let len = text.length
    clearInterval(timer)
    timer = setInterval(() => {
        if (len <= 0) {
            clearInterval(timer)
        }
        text_print_content.innerHTML = text.slice(0, text.length - (len - 1))
        len--
    }, 100)
}