修改留言板
修改留言板
一. 改写留言板案例,适当添加CSS美化
一）html代码
<!DOCTYPE html><htmllang=“en”><head><metacharset=“UTF-8”/><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”/><metaname=“viewport”content=“width=], initial-scale=1.0”/><title>todoList:留言板</title><linkrel=“stylesheet”href=“css/font-icon.css”/></head><body><style>青狐资源网wcqh.cn.list { list–style: none;}.title a { text–decoration: none;}.title1 a { margin:0; text–decoration: none;}.title1 h { list–style: none;}.title1 { height:50px; width:699px; border:1px solid red; text–align: center; background–color: brown; display: table;}.title1 > a { font–size: x–large; background–color: lawngreen; display: table–c青狐资源网wcqh.cnell; vertical–align: middle; background–image: url(image/title1.png); background–size:auto100%;}.title1 >.Subtitle{ background–color: blue; margin:0;}.title { height:50px; width:684px; border–top:1px solid red; border–left:1px solid red; border–right:1px solid red; text–align: center;}.title.navigation { display: flex;pla青狐资源网wcqh.cnce–items: center; padding–left:15px; gap:20px;}.title.navigation a { font–size: large;}.content { width:700px; display: grid; grid–template–columns:500px1fr; grid–template–rows:200px100px; margin:1px; gap:5px;}.members { grid–row: span 2; border:1px solid red; display: grid; grid–template–rows:100px200px; gap:2px;}.members青狐资源网wcqh.cn.group{ border:1px solid red; background–color: yellowgreen;}.DisplayBox{ height:200px; width:500px; border–top:1px solid red; border–left:1px solid red; border–right:1px solid red;}.Input>.nav >.expression { text–decoration: none;}.nav { height:20px; border: none; display: flex; gap:15px;}.nav > a { color: darkgrey;}.Button{h青狐资源网wcqh.cneight:40px; text–align: right; font–size: x–large;} input { height:40px; border: none;}.Input.area { height:100px; width:500px; border:1px solid red;}</style><divclass=“title1”><ahref=“”></a></div><divclass=“title navigation”><ahref=“”>聊天</a><ahref=“”>公告</a><ahref=“”>相册</a><ahref=“”>文件</a><ahref=“”>作业</a><ahref=“青狐资源网wcqh.cn“>设置</a></div><divclass=“content”><div><divclass=“DisplayBox”><ulclass=“list”><li><button>删除</button></li><li><button>删除</button></li></ul></div><divclass=“Input area”><divclass=“nav”><ahref=“”class=“iconfont unicode”></a><ahref=“”class=“iconfont unicode”></a><ahref=“”class=“iconfont青狐资源网wcqh.cn unicode”></a><ahref=“”class=“iconfont unicode”></a><ahref=“”class=“iconfont unicode”></a><ahref=“”class=“iconfont unicode”></a></div><inputtype=“text”onkeydown=“insertComment(this)“placeholder=“请输入留言”/><divclass=“Button”><button>关闭</button><button>发送</button></div></青狐资源网wcqh.cndiv></div><divclass=“members”><divclass=“group Notice”><ahref=“”>群通知</a></div><divclass=“group members1”><ahref=“”>群成员</a></div></div></div><script>const insertComment =function(ele){// 1.非空判断// console.log(ele)// console.log(event);// console.log(event.type);// console.log(event.key);if(event.key ===“青狐资源网wcqh.cnEnter”){if(ele.value.length ===0){ alert(“留言不能为空”); ele.focus();returnfalse;}// 2.添加留言// console.log(ele.value);// 创造一个新元素来保存留言// const li = document.createElement(“li”);// li.append(ele.value);// const ul = document.querySelector(“.list”);// if (ul.firstElementChild !== null) {// ul.firstElementChild.青狐资源网wcqh.cnbefore(li);// } else {// ul.append(li);// }const ul = document.querySelector(“.list”); ele.value +=`<button onclick=“del(this.parentNode)”>删除</button>`; ul.insertAdjacentHTML(`beforeend`,`<li>${ele.value}</li>`);// 3.清空输入框 ele.value =null;}};// 删除const del =function(){ confirm(“是否删除?”)? ele.remove():false;};</s青狐资源网wcqh.cncript></body></html>二）实现效果图
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容