JavaScript实现简单评论功能

2024-09-28 13:45:16

本文实例为大家分享了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>

效果图：

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

JavaScript实现QQ聊天消息展示和评论提交功能

QQ聊天消息显示,提交评论等实现原理,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bos { margin: 100px auto; width: 350px; posi
Vue.js实现文章评论和回复评论功能

本来想把这个页面用jade渲染出来.评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧. 先上在线demo:http://jsbin.com/ceqifo/1/edit?js,output 再上效果图可直接评论,点击别人的评论能回复别人的评论. html <div id="comment"> <article-content v-bind:article="article"></article-content&g
vue.js评论发布信息可插入QQ表情功能

本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish">  <div class="publish_container"> <p contenteditable
原生js实现回复评论功能

实现原理功能1.删除状态用removeChild()方法即可功能2.最上面的点赞判断文字的内容是否为赞,做相应操作改变存放赞数量的容器文本内容功能3.回复评论创建一个新的评论添加到评论列表里功能4.回复里的点赞判断我是否点了赞,做相应操作功能5.回复或者删除判断字符串回复还是删除,做相应操作代码用了事件代理,还有三元运算判断,减少代码量每行代码都有详细的注释一眼看到那么多的代码不要烦躁其实你要把每个功能单独去看都是很简单的dom操作一点点消化,读懂每一行代码完整代
JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo
JavaScript评论点赞功能的实现方法

通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem
JavaScript实现简单评论功能

本文实例为大家分享了JavaScript实现简单评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024
基于javascript实现简单计算器功能

本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下效果图: 实现代码: <html> <head> <script> function calc(event){ // test //window.alert(event.value); var val = new String(event.value); // clear space val = val.trim(); var res = document.getEl
javascript实现简单搜索功能

本文实例为大家分享了javascript实现简单搜索功能的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style> table{ width: 500px; } td{ bo
jQuery实现简单评论功能

本文实例为大家分享了jQuery实现简单评论功能的具体代码,供大家参考,具体内容如下例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /
JavaScript实现简单计算器功能

本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下 1.实现基本计算器功能,如图 2.逻辑代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title>  <style> .showdiv{ text-align: center; margin:
微信小程序实现简单评论功能

本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下具体直接看代码 wxml: <view> <button bindtap='showTalks'>查看评论</button> </view>  <view class='talks-layer' animation='{{talksAnimationData}}'>  &l
基于JavaScript实现简单抽奖功能代码实例

为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧: 点击抽取就可以抽签了,红色框会显示内容,(PS:红色框是没有的,仅仅做描述) 抽取到的效果图如下,字体会随机滚动,最后停止: 里面的抽取内容完全可以替换,,,, 下面贴上代码: <!DOCTYPE html> <html lang="zh"> <head> &l
JavaScript实现简单的计算器功能

本文实例为大家分享了JavaScript实现简单计算器功能的具体代码,供大家参考,具体内容如下具体要求如下: 实现代码: <html> <head> <meta charset="utf-8"> <title>计算器</title> <script> function myck(type){ var num1 = document.getElementById("num1"); var num
jQuery实现的简单无刷新评论功能示例

本文实例讲述了jQuery实现的简单无刷新评论功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论 - www.jb51.net</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></scr
Vue实现简单的发表评论功能

本文实例为大家分享了Vue实现简单的发表评论功能的具体代码,供大家参考,具体内容如下 1.这是我在学习中的实例,有些的不足的地方,还望各位大佬指点,感谢哦~ 2.发表评论的效果图点击"发表"之后的效果(每条评论之后点击"删除"可以删掉这一整条评论~) 3.完整代码展示(我html结构写的比较乱,这里提醒大家一下,没有定义类的div是可以删掉的,我是因为方便写样式所以多加了div) 还是要提醒一下,不要忘记引入vue.js,目录记得根据自己存放的位置改 <!D

JavaScript实现简单评论功能

相关推荐

随机推荐