标签：bind body input cto ora 信息 color 代码实现 time
// 数组方式实现文字搬运效果
结构部分
<!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‘);
标签：bind body input cto ora 信息 color 代码实现 time
原文地址：https://www.cnblogs.com/rencoo/p/9372099.html
