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>

效果图:

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

(0)

相关推荐

  • vue.js实现用户评论、登录、注册、及修改信息功能

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

  • 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

  • JavaScript评论点赞功能的实现方法

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

  • 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评论发布信息可插入QQ表情功能

    本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析--> <div class="publish_container"> <p contenteditable

  • 原生js实现回复评论功能

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

  • 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

  • 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

随机推荐