JavaScript实现简单评论功能


Posted in Javascript onAugust 17, 2017

本文实例为大家分享了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实现简单评论功能

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

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
前端微信支付js代码
Jul 25 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
vue绑定class与行间样式style详解
Aug 16 #Javascript
Vue的MVVM实现方法
Aug 16 #Javascript
利用JS制作万年历的方法
Aug 16 #Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 #Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 #Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
可以支持多中格式的JS键盘
2007/05/02 Javascript
Javascript 对象的解释
2008/11/24 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
Python类属性与实例属性用法分析
2015/05/09 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python lxml中etree的简单应用
2019/05/10 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python中的itertools的使用详解
2020/01/13 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
python从Oracle读取数据生成图表
2020/10/14 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
责任心演讲稿
2014/05/14 职场文书
自主招生学校推荐信
2014/09/26 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript