JavaScript实现简单评论功能
时间:2019-03-31
本文章向大家介绍JavaScript实现简单评论功能,主要包括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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- CoordinatorLayout
- 从零开始的Spring Security Oauth2(二)
- 简化Swagger使用的自制Starter:spring-boot-starter-swagger,欢迎使用和吐槽
- demo3同通讯录展示的方式分组排序
- Android手势研究(textview及listview对比验证)
- demo2动态加载显示商品详情页
- demo1 动态显示view或弹框 动态隐藏view或弹框
- ios 继承UITableViewController,更改tableview样式
- demo1 动态显示view或弹框 动态隐藏view或弹框
- 从零开始的Spring Security Oauth2(一)
- 细说Android事件传递
- swift基础_ set get方法 理解
- 高仿今日头条(2)
- ios tableview 上加 textfiled
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [全部章节]栈论 : 递归与栈式访问,如何用栈实现所有递归操作 (内附幼儿园题目,要笑着做完)
- Apache IoTDB 系列教程-2:基础 SQL 操作
- Apache IoTDB 系列教程-3:部署运维
- 栈论 : 递归与栈式访问,如何用栈实现所有递归操作(幼儿园题目篇)
- kali下安装beef并联合Metasploit
- 初次使用maven创建web工程发现只有一个idea目录,src,webapp目录都不见了,解决方案
- 栈论 : 递归与栈式访问,如何用栈实现所有递归操作(幼儿园题目篇,题目2)
- SQL注入原理及代码分析(一)
- SQL注入原理及代码分析(二)
- 写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出 现的次数。
- SSRF漏洞简单分析
- 树莓派基础实验30:BMP180气压传感器实验
- DC-1靶机实战和分析
- 如何用Python优雅的登录校园网?
- PHP入门之类型与运算符