/1.按照图片,实现网页布局。
2.页面打开,下面评论区域不显示内容。
3.在上面的输入框输入内容,点击提交评论按钮
输入的消息会在下方显示[内容时间等 做好布局]
4.每条评论右侧的上和下的拇指图片后面数字初始化都是0
5.选作题
点击上或者下的图标
后面的数字加1
6.选作题:
点击删除图标或者文字,
当前这条评论删除/
Javascript第三个问不会写
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- 崽崽的谷雨 2022-03-04 13:44关注
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { /*background-image: url(../img/91R58PIC3n2_1024.jpg);*/ } #div1 { margin: auto; border: 1px beige solid; width: 512px; text-align: right; } ul { list-style-type: none; list-style-image: url(../img/touxiang.png); } .box { width: 400px; height: 150px; /*background-color: yellow;*/ border: 1px darkgray solid; border-radius: 30px; position: relative; } .box .touxiang { width: 80px; height: 80px; background-image: url(../img/touxiang.png); background-size: 100% 100%; position: absolute; left: 10px; top: 10px; } .box .nicheng { width: 80px; height: 25px; /*background-color: red;*/ position: absolute; left: 10px; top: 100px; font-size: 12px; text-align: center; line-height: 25px; } .box .pinglun { width: 290px; height: 80px; /*background-color: cyan;*/ position: absolute; top: 10px; right: 10px; } .box .shijian { width: 200px; height: 25px; /*background-color: green;*/ position: absolute; top: 100px; left: 100px; } </style> <script> window.onload = function () { var oTxt = document.getElementById("txt"); var oBtn = document.getElementById("btn1"); var oUl1 = document.getElementById("ul1"); oBtn.onclick = function () { var oBox = document.createElement("div"); oBox.className = "box"; //创建头像 var oDiv = document.createElement("div"); oDiv.className = "touxiang"; oBox.appendChild(oDiv); var oDiv = document.createElement("div"); oDiv.className = "nicheng"; oDiv.innerHTML = "指尖微凉*"; oBox.appendChild(oDiv); var oDiv = document.createElement("div"); oDiv.className = "pinglun"; oDiv.innerHTML = oTxt.value; oBox.appendChild(oDiv); var oDiv = document.createElement("div"); oDiv.className = "shijian"; var oDate = new Date(); //oDate.getFullYear oDiv.innerHTML = "评论时间 " + oDate.getFullYear() + "年" + (oDate.getMonth() + 1) + "月" + oDate.getDate() + "日" + "<a href='javascript:;'>删除</a>"; oBox.appendChild(oDiv); oUl1.appendChild(oBox); /*oBox.insertBefore(oUl1,oDiv[0]);*/ var aA = oDiv.getElementsByTagName("a"); for (var i = 0; i < aA.length; i++) { aA[i].onclick = function () { oDiv.removeChild(this.parentNode); } } } } </script> </script> </head> <body> <h2 align="center">网易云热评</h2> <div id="div1"> <textarea cols="70" rows="8" id="txt"></textarea><br /> <input type="button" value="评论" id="btn1" /> <ul id="ul1"> </ul> </div> </body> </html>
就是 js dpm元素的增删改查 。你改一下样式即可
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 2无用
悬赏问题
- ¥100 set_link_state
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化
- ¥15 Tableau online 嵌入ppt失败
- ¥100 支付宝网页转账系统不识别账号
- ¥15 基于单片机的靶位控制系统
- ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度