JavaScript实现简单评论功能
程序员文章站
2022-09-08 20:23:15
本文实例为大家分享了javascript实现简单评论功能的具体代码,供大家参考,具体内容如下
本文实例为大家分享了javascript实现简单评论功能的具体代码,供大家参考,具体内容如下
<!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进度条加载效果
下一篇: 微信小程序实现倒计时60s获取验证码