12.26(JS初学之模拟聊天练习)

原创 15102883200 随笔 JS初学 808阅读 2017-12-26 16:51:30 举报

今天进一步学习了JS的属性操作,所以写了个小练习来练练手。

总体来说没什么不顺利的地方,很好玩,路也很长。

下面是一个演示的小视频,我传到了云盘上,这边放一个可以在线观看的链接好了

案例演示视频
ps:加载可能得五六秒,视网速而定,耐心等待~

写完了这个练习,出去溜达溜达吃个饭,晚上回来再战!

代码放在下面了,只是个初级版本,主要是为了明白原理而练习的,所以样式什么的比较粗糙,下个版本的时候再改进。

12.26(JS初学之模拟聊天练习)

评论 ( 13 )
最新评论
戒不掉的殇 12F 2017-12-28 09:45:27 13F

15102883200 11F 2017-12-28 09:43:04 12F

加在发送函数的最后,不过这个代码我犯了个错误,id重复了,很低级,过几天改了我重新传一个新的代码上来

戒不掉的殇 10F 2017-12-28 08:40:22 11F

嗯 这样会覆盖。 oShow.scrollTop = oShow.scrollHeight;这个加在哪个位置呢?

15102883200 9F 2017-12-27 19:42:32 10F

嗯,这句是改变了新的聊天出现的位置,也就是新消息出现在下面,但是只写这个的话如果内容过多,滚动条不会自动拖到最下面,就会导致新的内容在下面被盖住看不见了。所以还得加个我前面说的那个设置。中午改的时候就是按你刚说的这样改的,外带下面那样的设置,前面回复你的时候忘说了

戒不掉的殇 8F 2017-12-27 18:03:03 9F

oShow.innerHTML=oShow.innerHTML+'<div class="content-text1 clearfix">'+'<a href="javascript:;" id="photo">'+oPhoto.innerHTML+'</a>'+'<div>'+oText.value+'</div>'+'</div>';
这样也行

15102883200 7F 2017-12-27 13:54:12 8F

嗯,我重新在代码里加了oShow.scrollTop = oShow.scrollHeight; 这样最新聊天就是在最下了~

戒不掉的殇 6F 2017-12-27 13:45:04 7F

聊天的话是最新的在最后 评论的话最新的在最上

15102883200 5F 2017-12-27 13:30:52 6F

嗯,应该是最下面的,这个放在上面是昨夜里要求放在上面的

戒不掉的殇 2017-12-27 09:41:17 5F

最新的发言应该是在最下面吧

15102883200 3F 2017-12-26 19:00:22 4F

也没什么大的问题,这个很粗糙,还得再优化,就是简单的实现了下,没细想

moxiao 2F 2017-12-26 18:46:18 3F

真不错,我就是想了下怎么做,没有具体写,就跟着视频上面做了下。

15102883200 1F 2017-12-26 18:34:38 2F


moxiao 2017-12-26 18:22:05 1F

厉害了