【JavaScript】JS实用案例分享：输入智能提示 打字机输出效果_js输入框旁边提示信息(2)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

}

// 对特殊字符的处理
function special(val) {
// 如果val是()[].+/?*这类的特殊字符，则在它前面加上转义字符：
// 为什么是\KaTeX parse error: Undefined control sequence: \？ at position 9: {val}，两个\̲？̲因为在模板字符串``中\也需要…{‘()[].+/?*’.indexOf(val) === -1 ? val : \\${val}}.*?`
}

这个案例中需要注意的地方就是不要忘记对特殊字符的转义（实现`special`函数）。


**知识点：**


* [RegExp(正则表达式)](https://bbs.csdn.net/topics/618545628)
* [split()](https://bbs.csdn.net/topics/618545628) 方法使用指定的分隔符字符串将一个`String`对象分割成子字符串**数组**，以一个指定的分割字串来决定每个拆分的位置。
* [map()](https://bbs.csdn.net/topics/618545628) 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
* [join()](https://bbs.csdn.net/topics/618545628) 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
* [filter()](https://bbs.csdn.net/topics/618545628) 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
* [test()](https://bbs.csdn.net/topics/618545628) 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 `true` 或 `false`。
* [Element.classList](https://bbs.csdn.net/topics/618545628) 是一个只读属性，返回一个元素 `class` 属性的动态 [DOMTokenList](https://bbs.csdn.net/topics/618545628)集合。这可以用于操作 `class` 集合。
* [indexOf()](https://bbs.csdn.net/topics/618545628) 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。


## 2、打字机输出


### 效果演示


![在这里插入图片描述](https://img-blog.csdnimg.cn/34a3feebe7764203b3b9a1f6d5cb154a.gif#pic_center)  
 有以下`HTML`和`CSS`：


HTML结构

h e l l o   w o r l d
你 好 世 界 |

CSS样式

html,
body {
margin: 0;
}

.color1 {
color: #E60012;
}

.color2 {
color: #EB6100;
}

.color3 {
color: #F39800;
}

.color4 {
color: #FCC800;
}

.color5 {
color: #FFF100;
}

.color6 {
color: #CFDB00;
}

.color7 {
color: #8FC31F;
}

.color8 {
color: #22AC38;
}

.color9 {
color: #009944;
}

.color10 {
color: #009B6B;
}

.color11 {
color: #009E96;
}

.color12 {
color: #00A0C1;
}

.color13 {
color: #00A0E9;
}

.color14 {
color: #0086D1;
}

.color15 {
color: #0068B7;
}

.color16 {
color: #00479D;
}

.color17 {
color: #1D2088;
}

.color18 {
color: #601986;
}

.color19 {
color: #920783;
}

.color20 {
color: #BE0081;
}

.color21 {
color: #E4007F;
}

.color22 {
color: #E5006A;
}

.color23 {
color: #E5004F;
}

.color24 {
color: #E60033;
}

.word {
font-size: 20px;
}

.content {
text-align: center;
font-size: 0;
}

.blink {
font-size: 20px;
animation: fade 500ms infinite;
-webkit-animation: fade 500ms infinite;
}

@keyframes fade {
from {
opacity: 1.0;
}

50% {
    opacity: 0;
}

to {
    opacity: 1.0;
}

}

### 案例需求


页面上存在`id`为`jsBlink`的下划线闪动节点，请按照如下需求实现 `output` 函数


1. 函数 `output` 接收一个字符串参数，每隔200毫秒在闪动节点之前**逐个显示字符**
2. 请新建`span`节点放置每个字符，其中`span`必须存在`class` “`word`”，并随机加上 `color1 ~ color24` 中的任一个`class`（请使用系统随机函数）
3. **每次输出指定字符串前，请将闪动节点之前的所有其他节点移除**
4. 不要销毁或者重新创建闪动节点
5. 如果输出字符为`空格`、`<`、`>`，请分别对其进行`HTML`**转义**，如果是`\n`请直接输出`<br />`，其他字符不需要做处理
6. 上面展示的效果为 `output('hello world\n你好世界')` 之后的界面


### JavaScript实现

function output(str) {
const content = document.getElementsByClassName(‘content’)[0]
const jsBlink = document.getElementById(‘jsBlink’)

// 将闪动节点之前的所有其他节点移除
while (content.children.length > 0) {
    if (content.children[0] == jsBlink) {
        // 如果content第1个孩子是jsBlink，说明闪动节点之前的所有其他节点移除完毕，则跳出循环
        break;
    }
    // 删除content中的指定节点
    content.removeChild(content.children[0]);

}

let i = 0;

const stl = setInterval(() => {
    if (str[i] == '\n') {
        const br = document.createElement('br')
        // 在content中的jsBlink之前插入节点br
        content.insertBefore(br, jsBlink)
    } else {
        const span = document.createElement('span')
        span.classList.add('word')
        span.classList.add(`color${Math.floor(Math.random() \* 24 + 1)}`)
        switch (str[i]) {
            case ' ':
                span.innerHTML = '&nbsp'
                break;
            case '<':
                span.innerHTML = '&lt'
                break;
            case '>':
                span.innerHTML = '&gt'
                break;
            default:
                span.innerHTML = str[i]
                break;
        }

        content.insertBefore(span, jsBlink)
    }

    i++;
    if (i >= str.length) {
    	// 清除定时器
        clearInterval(stl)
    }
}, 200)

}

// 调用测试
output(‘hello world\n你好世界’)

**知识点：**


* [Node.insertBefore()](https://bbs.csdn.net/topics/618545628) 方法在参考节点之前插入一个拥有指定父节点的子节点。


## 结语



> 
> 这篇文章的所有内容都出自于[牛客网的JS篇题库](https://bbs.csdn.net/topics/618545628)：  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/4bda5af2d92143c98cbb56d82442173f.png)
> 
> 
> 


牛客网的`JS`题库非常贴合实际的，在写的过程中自己查漏补缺，收获了很多，强烈将[牛客网](https://bbs.csdn.net/topics/618545628)推荐给大家！


![img](https://img-blog.csdnimg.cn/img_convert/47d593c00021e64c48b4485217baf70f.png)
![img](https://img-blog.csdnimg.cn/img_convert/f7148bb5264a5f72f31236ab63468456.png)
![img](https://img-blog.csdnimg.cn/img_convert/a0a6dda89098024bdfc2d3723d06c6a4.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

aizJ0x-1715699861626)]
[外链图片转存中...(img-6cTb3WTz-1715699861627)]
[外链图片转存中...(img-0wavuBDo-1715699861627)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**