// 数组方式实现文字搬运效果
结构部分
<!DOCTYPE html><html lang="en" dir="ltr"> ???<head> ???????<meta charset="utf-8"> ???????<title>文字搬运</title> ???????<style> ???????????* { ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????#my-wordsRemove { ???????????????position: relative; ???????????????width: 800px; ???????????????height: 300px; ???????????????padding: 10px; ???????????????border: 5px solid #CCC; ???????????????margin: 10px auto; ???????????} ???????????#inputArea { ???????????????float: left; ???????????????position: relative; ???????????????top: -2px; ???????????????left: -2px; ???????????????width: 37.5%; /*300px*/ ???????????????height: 100%; ???????????????border: 2px dashed black; ???????????????background: #C63; ???????????????outline: 1px solid black; ???????????} ???????????#inputArea > textarea { ???????????????width: 100%; ???????????????height: 100%; ???????????????border: 0px; /*默认有个 border*/ ???????????????background: #C63; ???????????????/*maxlength: 280px; 最大字符长度*/ ???????????????font-size: 16px; ???????????????line-height: 30px; /*行距*/ ???????????????color: #FFF; ???????????} ???????????#midArea { ???????????????float: left; ???????????????position: relative; ???????????????top: -2px; ???????????????width: 120px; ???????????????/*(800 - (300 + 2 + 2)*2 - 120)/2; relative不影响布局，相对于原来的布局位置偏移，但还占着原来的位置*/ ???????????????margin: 0 36px; ???????????????outline: 1px solid black; ???????????????text-align: center; /*盒模型里面内容居中*/ ???????????} ???????????#midArea>#btn { ???????????????width: 100px; ???????????????height: 30px; ???????????????background: #F60; ???????????????font-size: 16px; ???????????????line-height: 30px; ???????????????color: #FFF; ???????????????border: 0; ???????????????cursor: pointer; ???????????} ???????????#midArea strong { ???????????????margin-top: 10px; ???????????????display: inline-block; ???????????} ???????????#midArea ul { ???????????????list-style: none; ???????????????margin-top: 30px; ???????????????margin-left: 10px; ???????????????display: none; ???????????} ???????????#midArea ul>li { ???????????????width: 12px; ???????????????height: 12px; ???????????????background: #FC6; ???????????????float: left; ???????????????margin-right: 10px; ???????????} ???????????#outputArea { ???????????????float: right; ???????????????position: relative; ???????????????top: -2px; ???????????????right: -2px; ???????????????width: 37.5%; /*300px*/ ???????????????height: 100%; ???????????????border: 2px dashed black; ???????????????background: #FC6; ???????????????outline: 1px solid black; ???????????} ???????????#outputArea > textarea { ???????????????width: 100%; ???????????????height: 100%; ???????????????border: 0px; /*默认有个 border*/ ???????????????background: #FC6; ???????????????/*maxlength: 280px; 最大字符长度*/ ???????????????font-size: 16px; ???????????????line-height: 30px; ???????????????color: #333; ???????????} ???????</style> ???</head> ???<body> ???????<div id="my-wordsRemove"> ???????????<div id="inputArea"> ???????????????<textarea rows="20" cols="20"></textarea> ???????????</div> ???????????<div id="midArea"> ???????????????<input id="btn" type="button" value="文字右移"/> ???????????????<strong>0/0</strong> ???????????????<ul> ???????????????????<li class="li-selected"></li> ???????????????????<li></li> ???????????????????<li></li> ???????????????????<li></li> ???????????????????<li></li> ???????????????</ul> ???????????</div> ???????????<div id="outputArea"> ???????????????<textarea rows="20" cols="20"></textarea> ???????????</div> ???????</div> ???????<!-- <script src="原始代码实现.js"></script> --> ???????<!-- <script src="wordsRemove.js"></script> --> ???????<script src="control.js"></script> ???</body></html>API 和 控制流
class WordsRemove { ???constructor(id) { ???????this.container = document.getElementById(id); ???????this.inputArea = this.container.querySelector(‘#inputArea‘) ???????.querySelector("textarea"); ???????this.outputArea = this.container.querySelector(‘#outputArea‘) ???????.querySelector("textarea"); ???????this.midArea = this.container.querySelector(‘#midArea‘); ???????this.ul = this.midArea.querySelector("ul"); ???????this.lis = this.midArea.querySelectorAll(‘li‘); ???????this.strong = this.midArea.querySelector(‘strong‘); ???????// 计时器变量; ???????this.rollTimer = null; ????????this.textMoveTimer = null; ???????// UI控制流部分 ????????const btn = this.midArea.querySelector(‘#btn‘); ???????if(btn) { ???????????btn.addEventListener(‘click‘, evt => { ???????????????this.inputLength = this.getInputLength(); ???????????????// 判断输入框中是否有文字 ???????????????if(this.inputLength == 0) { ???????????????????alert(‘请输入文本信息‘); ???????????????????return; ???????????????} ???????????????????????????????// 改变控制按钮状态 ???????????????btn.style.background= "#ccc"; ???????????????// 清空输出框内容 ???????????????this.clearOutput(); ???????????????// 初始化roll显示状态 ???????????????this.initiRoll(); ???????????????????????????????// roll 效果 ???????????????this.rollTimer = setInterval(this.roll.bind(this), 50); ???????????????// 文字右移 ???????????????this.textMoveTimer = ????setInterval(this.textMove.bind(this), 50); ???????????}) ???????} ???} ???// API ???// inputArea API ???getInputLength() { ???????let length = this.inputArea.value.length; ???????return length; ???} ???textMove(){ ???????let str = this.inputArea.value; ???????let arr = str.split(‘‘); ???????if(this.getInputLength() == 0){ ???????????clearInterval(this.rollTimer); ???????????clearInterval(this.textMoveTimer); ???????????this.ul.style.display = ‘none‘; ???????????btn.style.background = ""; ???????????return; ???????} ???????this.outputArea.value += arr.shift(); ???????this.inputArea.value = arr.join(‘‘); ???????this.strong.innerHTML = this.getOutputLength() + ‘/‘ + this.inputLength; ???????arr.shift(); ???} ???// outputArea API ???????getOutputLength() { ???????let length = this.outputArea.value.length; ???????return length; ???} ???????// 清空输出区域 ???clearOutput() { ???????this.outputArea.value = ‘‘; ???} ???????// midArea 辅助API ???// 获得进度条roll显示的 li ???getSelectedItem() { ???????let selected = this.midArea.querySelector(‘.li-selected‘); ???????return selected; ???} ???// 获得当前进度条roll的 li 编号 ???getSelectedItemIndex() { ???????return Array.from(this.lis).indexOf(this.getSelectedItem()); ???} ???// 跳到目标 li ???rollTo(idx) { ???????let selected = this.getSelectedItem(); ???????if (selected) { ???????????selected.className = ‘‘; ???????} ???????let li = this.lis[idx]; ???????if (li) { ???????????li.className = ‘li-selected‘;// 不要加· ???????} ???} ???// midArea API ???// 初始化状态 ???initiRoll() { ???????this.ul.style.display = ‘block‘; ???????Array.from(this.lis).forEach(li => { ???????????li.style.background = ""; ???????}) ???} ???// 进度条roll实现 ???roll() { ???????this.initiRoll(); ???????let currentIdx = this.getSelectedItemIndex(); ???????console.log(currentIdx); ???????this.lis[currentIdx].style.background = ‘#f30‘; ???????let nextIdx = (currentIdx + 1) % this.lis.length; ???????this.rollTo(nextIdx); ???}}let wordsRemove = new WordsRemove(‘my-wordsRemove‘); ????????????webProject demo-1 wordsRemove
原文地址：https://www.cnblogs.com/rencoo/p/9372099.html