input placeholder信息输入效果

可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果，咋眼一看好像很简单，但是一些又说不上具体细节，如下图

一眼一看，这不动态改变 placeholder 的值就好了吗？仔细看人家还有一个类似光标的东西呢，其实也简单，在拼接的时候再拼接个 | 不就好了吗？

代码如下：

1const input = document.getElementById('input')
2		
3		let str = '女子否认拔病人尿管女子否认拔病人尿管'
4		let str2 = ''
5		let strArr = str.split('')
6       // 也可以用 Array.prototype.slice.call(str) 将字符串转为数组
7		
8		let number = 0
9		let timer = null
10
11		function add(arr,time = 1000) {
12			timer =  setInterval(() => {
13				if(timer && number == strArr.length) {
14					clearInterval(timer)
15					timer = null
16					return
17				}
18				str2 += `${arr[number]}`
19
20				input.placeholder = str2 +  (number ==  (strArr.length - 1) ?  '' : '|')
21				number++
22			},time)
23		}
24		add(strArr,140)

主要的思路就是将 新闻字符串分割为数组，通过定时器去不断组装的 placeholder，只需注意在在其末尾 添加 |，和最后一个时取消拼接就好了。

主要还是解决问题的思路，遇到问题多观察，就能发现人家是怎么做的，找到好的解决方案