简易版弹幕(PHP——xhr实现)

时间:2024-03-31 22:53:29

1.首先外面分析实现弹幕在页面上出现需要哪些步骤:

①需要有个文本框供我们输入内容,然后有个按钮,点击发送我们输入的内容到后台(这里我们就模拟表单提交数据,使用formdata对象)。

简易版弹幕(PHP——xhr实现)

注意:formdata括号里面的第一个参数“Word”是自己随意定义的变量,第二个参数是要提交的数据。这里的word是我们写好的一个input输入框。完成了这一步,数据提交就完成了,但是我们现在还没有获取到我们自己传过去的数据,还不能在页面上显示。所以我们就要向后台提取数据:还是用我们的小黄人:(由于在一个页面内部,这个小黄人我们要用来传数据和接受数据,所以在写的时候,我们要把下面的这一部分的代码写在程序的点击事件之前,这里为了理清思路,上面就写在点击事件的下面进行解释。)

简易版弹幕(PHP——xhr实现)

上面的一部分就只是创建了对象,还没有发送请求,考虑到页面都是要实时刷新的,所以我们将发送请求用函数封装起来,seng();为空时,我们用来接受数据,并不传任何数据,接受的数据在xhr.onload = function(){}里面;

简易版弹幕(PHP——xhr实现)

当然在使用计时器之前,我们得先调用一下这个刷新函数,方便我们一开始就可以看到弹幕上的文字。

reloadword();

紧接着我们就要动态生成元素,用来实时显示我们从后台获取到的数据,在xhr.onload事件里面调用该函数。我们用函数封装一下添加文字和设置文字的CSS样式:

简易版弹幕(PHP——xhr实现)

可以看到,在该函数的是内部,我们将新生成的元素添加到一个空的数组内部,用来备用。

在数组words里面我们用来写文字移动的样式,以及删除动态生成的元素,以此减轻页面的负担

简易版弹幕(PHP——xhr实现)

还需要完善的是,添加计时器,执行文字移动,以及一个定时器,让我们可以每个多长时间就能看到我们新输入的文字。

简易版弹幕(PHP——xhr实现)

下面的就是生成随机数的函数,方便我们直接拿过来用。

简易版弹幕(PHP——xhr实现)

所有上述的内容就是我们前端人员需要做的事了,那么在后台我们该怎么写呢?

看代码:

简易版弹幕(PHP——xhr实现)

可以看到,在向前台传送数据之前,我们得先接收到前台的数据,并保存在一个文件里,这个文件就是模拟以后我们要说到的数据库。但是在保存之前,我们得先判断,前台传过来的数据是否为空:$_POST['word'],里面的‘word’,就是我们前台的formdata.append("word",word)里的第一个参数,就是我之前说的,随意定义的变量名。

保存好之后,就是要向前台传数据了,这时,我们就要打开我们刚刚保存数据的文件了,当然不是手动点开我们电脑上的文件,而是以代码命令fopen();打开文件

简易版弹幕(PHP——xhr实现)

这里只是读取文件就好了,不需要写入文件什么内容,所以fopen("danmu.txt","r"),第一个参数为要打开的文件名,第二个为打开文件的方式,"r"表示只读。读取文件保存在一个数组里,最后用json_encode("数组名")的方式转换数组,方便前台使用数据,这里echo 输出的内容,就是xhr的onload事件里面的this.responseText.

做完所有的一切,简易的弹幕就做好了。这要再看不明白,我也表示很无语。