企业网站必须备案吗,h5页面可以跳转到小程序吗,微信官方网站下载,电商网站页面设计思路#xff1a; 需求1#xff1a;检测用户输入的字数 注册input事件 将输入文本长度赋值给对应的数值 需求2#xff1a;输入不能为空 点击按钮之后判断 如果输入为空#xff0c;则提示不能输入为空#xff0c;并直接return 为了防止无意义的一些输入#xff0c;利用字符…思路 需求1检测用户输入的字数 注册input事件 将输入文本长度赋值给对应的数值 需求2输入不能为空 点击按钮之后判断 如果输入为空则提示不能输入为空并直接return 为了防止无意义的一些输入利用字符串.trim()可以去掉首尾空格 当输入为空点击发布按钮以后 将输入内容清空 计数器也变为0 需求3 新增留言 应写在点击事件内部 创建li 然后里面通过innerHTML追加数据 追加给父元素ul ,用父元素.insertBefore(插入到当前元素的前面) 需求4删除事件必须写在点击事件里面 删除事件应该放在追加ul的前面这样创建元素的同时顺便绑定了点击事件 删除操作 删除li 父元素.removeChild(子元素) 需求5重置 发布完一条消息后将表单的内容重置为空 代码部分 HTML代码 !DOCTYPE html html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet href./css/weibo.cssscript src../发布微博案例/jquery-3.7.1.slim.js/script /headbodydiv classwdiv classcontrolsimg srcimages/tip.png altbrtextarea placeholder说点什么吧... idarea cols30 rows10 maxlength200/textareadivspan classuseCount0/spanspan//spanspan200/spanbutton idsend发布/button/div/divdiv classcontentListul idlist/ul/div/divscript src./index.js/script /body/htmlcss代码 * {margin: 0;padding: 0; }ul {list-style: none; }.w {width: 900px;margin: 0 auto; }.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline: none;padding-left: 20px;padding-top: 10px;font-size: 18px; }.controls {overflow: hidden; }.controls div {float: right; }.controls div span {color: #666; }.controls div .useCount {color: red; }.controls div button {width: 100px;outline: none;border: none;background: rgb(0, 132, 255);height: 30px;cursor: pointer;color: #fff;font: bold 14px 宋体;transition: all 0.5s; }.controls div button:hover {background: rgb(0, 225, 255); }.controls div button:disabled {background: rgba(0, 225, 255, 0.5); }.contentList {margin-top: 50px; }.contentList ul {height: 800px; }.contentList li {/* display: none; */padding: 20px 0;border-bottom: 1px dashed #ccc;height: 60px; }.contentList li a {margin-left: 800px; } js代码 const data [{uname:张三,imgSrc:images/03.jpg},{uname:李四,imgSrc:images/03.jpg},{uname:王麻子,imgSrc:images/03.jpg},{uname:小刘,imgSrc:images/03.jpg},]; // 需求1检测用户输入的字数 let textarea document.querySelector(textarea); let useCount document.querySelector(.useCount); let btn document.querySelector(#send); let ul document.querySelector(#list); // 注册input事件 textarea.addEventListener(input, function () {// 将输入文本长度赋值给对应的数值useCount.innerHTML this.value.length; }); // 需求2输入不能为空 // 点击按钮之后判断 如果输入为空则提示不能输入为空并直接return btn.addEventListener(click, function () {// 为了防止无意义的一些输入 利用字符串.trim()可以去掉首尾空格if (textarea.value.trim() ) {// 当输入为空点击发布按钮以后 将输入内容清空 计数器也变为0textarea.value ;useCount.innerHTML 0;return alert(内容不能为空);} // 随机函数function getRandom(min, max) {return Math.floor(Math.random() * (max - min 1)) min;}let index getRandom(0, data.length - 1);// 需求3 新增留言 应写在点击事件内部// 创建一个小li 然后里面通过innerHTML追加数据let li document.createElement(li);li.innerHTML div classinfoimg classimgs src${data[index].imgSrc}span classusername${data[index].uname}/spanbutton classdel×/buttondiv classcontent${textarea.value}/divdiv classsend-time${new Date().toLocaleString()}/div/div // 需求4删除事件必须写在点击事件里面 // 删除事件应该放在追加ul的前面这样创建元素的同时顺便绑定了点击事件let del li.querySelector(.del);del.addEventListener(click, function () {// 删除操作 删除li 父元素.removeChild(子元素)ul.removeChild(li);}); // 追加给父元素ul ,用父元素.insertBefore(插入到当前元素的前面)ul.insertBefore(li, ul.children[0]); // 需求5重置 // 发布完一条消息后将表单的内容重置为空textarea.value ;useCount.innerHTML 0; }); 拓展按下回车键发布信息 这里需要用到事件对象来实现通过文本输入框的keyup(按键弹起)事件的key属性值来判断当前用户输入键盘的类型只要event.key Enter就调用btn.click()方法自动触发发布按钮。 注意这里不宜使用keydown属性使用keydown则会导致文本输入框的内容无法清空始终有回车键存在于文本输入框内。 textarea.addEventListener(keyup,function(event){// 只要 event.key Enterif (event.key Enter){// 回车发布新闻 与点击发布按钮效果等价// 回车后 自动触发点击按钮btn.click() }       }) 效果