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 创建对象和构造类实现代码
Jul 30 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
微信小程序select下拉框实现源码
Nov 08 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 CKEditor 上传图片实现代码
2009/11/06 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python实现定时任务
2017/02/08 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
公司投资建议书
2014/05/16 职场文书
售房协议书范本2014
2014/10/23 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
element多个表单校验的实现
2021/05/27 Javascript
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏