滚动的input内容

网络技术一直在发展在进步，编写代码也是越来越便捷，人们做出了很多插件，都是便于编写代码的。很多人习惯了使用插件，可能会忘了原生js代码。今天我又发现了一个用原生js代码写出来的一个很有趣又很实用的一个特效。
大家平时在商场或者在某些街道都会看到一些招牌，而有的商家还会弄出滚动的效果，这些滚动效果其实也是通过程序实现的，通过软件控制硬件。既然这样，那又是怎么通过代码实现一个滚动的效果呢？
我做了一个小的案例：

上面是一个简单的布局，首先要运行肯定是要写方法，所以先给body一个页面加载事件，然后是一个普通的表单布局里面有一个input（center标签在之前大家可能没见过，这个标签是直接让它里面的内容居中的，那么在页面显示的时候input框就直接在页面中间了）。

布局完成后下面将是核心代码，js部分。首先在进行编写方法代码之前需要准备一些变量：创建一个myMainMsg变量并赋值为一串字符串，这串字符串是实现结果input框内滚动的内容；其次是一个speed变量赋值为300，这个300是一个时间300毫秒；然后是一个startPosition赋值为零，是一个记录字符串的开始位置。
准备好这些参数就正式开始写方法代码了。

创建一个方法，该方法就是事先在布局body上的onLoad事件，首先创建一个mainMsg变量，将全局变量myMainMsg的值赋值给它，然后再创建一个scrollingRegion变量，将mainMsg内容的长度赋值给它，这时候有个问题：为什不直接用全局的变量直接赋值呢？其实进过尝试发现并不能那样做，往后面看就知道为什么了；创建一个变量j赋值为0。

使用for循环判断创建变量i=0，并且i小于等于j时i会自增1，这是一个最普通的循环，每次循环mainMag便等于自身加1。
substring()方法是javascript中获取字符串的一个方法，里面分别有两个参数，第一个是匹配字符串的开始位置，另一个是匹配文字的结束位置通过这两个参数截取字符串，这里开始位置参数设置为事先创建的一个全局变量startPosition为零，就是从该字符串长度的零位置开始，结束位置则是该变量值加上赋值变量scrollingRegion的位置，就是以显示该文本内容的最后一位结束，将该值赋值给通过id获取到所创建的input的value，然后startPosition++就是每循环一次自增1。

实现效果就是文本框内原本显示是你设置的整个文本，然后经过for循环让它的开始位置不断变化，就可以实现一条文本滚动的效果。当然，它结束位置长度为你需显示文本的长度，所以长度不变内容不够就需要每次for循环mainMag长度自增1，即整个显示文本会一直保持着同等的长度滚动，而内容跟着加1就会就形成了一条循环的内容。

当文本开始位置大于了自身长度就给它赋值为0，让它从头开始，由于文本结束位置等于文本长度，所以就会形成一个错觉，其实它是从新开始滚动的。
最重要的一步，使用递归的方式实现无限调用，使用setTimeout()方法，当body一加载，调用此方法，在最后一步又会调用该方法，滚动速度为speed（全局定义，300毫秒），那么每滚动一个字节长度在300毫秒内完成，也可以通过自行设置滚动速度，设置值越大，滚动速度越慢。
到这里应该明白为什么要重新给全局变量myMainMsg创建一个变量赋值了吧，如果不明白那我就说明一下：如果直接使用全局变量赋值，在自增的时候调用递归就会形成一个死循环，而通过赋值每一次调用方法都会去赋一次值，那么内容长度就不会无限增加，这是考虑到一个递归死循环的问题。