HTML+CSS+JavaScript:实现B站评论发布效果

一、需求

1、用户输入内容,输入框左下角实时显示输入字数

HTML+CSS+JavaScript:实现B站评论发布效果_第1张图片

 2、为避免用户输入时在内容左右两端误按多余的空格,在发送评论时,检测用户输入的内容左右两端是否带有空格,若有空格,发布时自动取消左右两端的空格

3、若用户发布的内容为空,则自动取消该条评论的发送,并弹出提示框:请勿发送空白评论!

4、当页面中已经填装多条评论时,发送的新评论自动追加到最末尾

5、 发布的评论最下方显示发布时间

HTML+CSS+JavaScript:实现B站评论发布效果_第2张图片

 

二、代码素材

以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写





    
    
    
    评论回车发布
    



    
0/200字

三、完整代码

因为今天这个案例的算法思路实在不方便直接用语言描述,所以我就直接放代码了

不过我在代码上添加了详细的注释,大家结合代码和注释一定能够理解的





    
    
    
    评论回车发布
    



    
0/200字

你可能感兴趣的:(html,css,javascript)