JavaScript实现简单评论功能

时间：2021-05-26

本文实例为大家分享了JavaScript实现简单评论功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body{}#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;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 ;position: absolute;left: 10px;top: 100px;font-size: 12px;text-align: center;line-height: 25px;}.box .pinglun{width: 290px;height: 80px;position: absolute;top: 10px; right: 10px; }.box .shijian{width: 200px;height: 25px;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.getFullYearoDiv.innerHTML ="评论时间&nbsp;&nbsp;"+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+"<a href='javascript:;'>删除</a>";oBox.appendChild(oDiv);oUl1.appendChild(oBox);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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章