格在发送评论时检测用户输入的内容左右两端是否带有空格若有空格发布时自动取消左右两端的空格

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

二、代码素材

initial-scale1.0title评论回车发布/titlestyle.wrapper

{min-width:

outlineoutline轮廓是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。

注释轮廓线不会占据空间也不一定是矩形。

*//*

textarea:focus

50px;}配合使用表示光标在文本域中时所有样式属性值all在2s内向border-color:#e4e4e4;background:

#fff;height:

textarea:focus的那几行代码配合可以让相关样式在获取焦点事件的时候平滑过渡

*/transition:

opacity设置透明度0是完全透明1是完全不透明opacity从0变成1时元素会平滑显现*/transition:

all

maxlength200/textareabutton发布/button/divdiv

classwrapperspan

classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp

classtime2022-10-10

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

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

!DOCTYPE

initial-scale1.0title评论回车发布/titlestyle.wrapper

{min-width:

outlineoutline轮廓是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。

注释轮廓线不会占据空间也不一定是矩形。

*//*

textarea:focus

50px;}配合使用表示光标在文本域中时所有样式属性值all在2s内向border-color:#e4e4e4;background:

#fff;height:

textarea:focus的那几行代码配合可以让相关样式在获取焦点事件的时候平滑过渡

*/transition:

opacity设置透明度0是完全透明1是完全不透明opacity从0变成1时元素会平滑显现*/transition:

all

maxlength200/textareabutton发布/button/divdiv

classwrapperspan

classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp

classtime2022-10-10

document.querySelector(#tx)const

button

document.querySelector(.wrapper

button)const

document.querySelector(.text)const

time

document.querySelector(.time)const

list

document.querySelector(.list)const

total

document.querySelector(.total)//函数功能发布评论function

fabu()

{//检测用户输入的内容左右两端是否带有空格若有空格发布时自动取消左右两端的空格//若用户发布的内容为空则自动取消该条评论的发送并弹出提示框请勿发送空白评论if

(tx.value.trim()

0/200字alert(请勿发送空白评论)return}//创建新的元素节点const

div

document.createElement(div)//修改元素节点的内容div.className

itemdiv.innerHTML

Date().toLocaleString()}/p/div//清空用户输入的内容tx.value

total.innerHTML

${tx.value.length}/200字//将用户输入的内容追加到评论区里list.append(div)}//鼠标点击发布调用发布函数button.addEventListener(click,

{fabu()})//

键盘按下Enter调用发布函数tx.addEventListener(keyup,

{if

fabu()})//输入框获得焦点左下角自动显示字数tx.addEventListener(focus,

function

1})//输入框失去焦点左下角字数显示自动消失tx.addEventListener(blur,

function

0})//用户输入时实时显示输入字数tx.addEventListener(input,

{total.innerHTML

${tx.value.length}/200字})/script/body/html