Javascript特效:简易留言板
知识点
- textarea 大段输入框
- value获取输入框的值
- innerHTML所用东西;innerText文本
- insertBefore在某个标签之前插入
运行效果
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}#box{width: 800px;border: 1px solid #ccc;margin:100px auto;padding: 20px}#my_textarea{width: 80%;height: 120px;font-size: 20px}.box-top{margin-bottom: 20px;}#ul li{border-bottom: 1px dashed #ccc;color: red;line-height: 44px}#ul li a{float: right;}</style>
</head>
<body>
<div id="box"><div class="box-top"><label for="my_textarea">发表评论<textarea name="my_textarea" id="my_textarea" cols="30" rows="10"></textarea></label><button id="btn">发表</button></div><ul id="ul"></ul>
</div>
<script>window.addEventListener('load',function (ev) {$('btn').addEventListener('click',function (ev1) {var my_textarea = $('my_textarea');// 1. 获取输入框中的内容var content = my_textarea.value;// 2. 判断if (content.length===0){alert('请输入评论的内容');return;}// 3. 创建li标签放入ulvar li = document.createElement('li');var ul = $('ul');li.innerHTML = content + '<a href="javascript:;">删除</a>'ul.insertBefore(li,ul.children[0]);// 4. 清楚输入框内容my_textarea.value = '';// 5. 删除评论var remove = ul.getElementsByTagName('a');for (var i = 0; i < remove.length; i++) {var r = remove[i];r.addEventListener('click',function (evt) {this.parentNode.remove();})}});/*** 根据id返回标签元素* @param {string}id* @returns {any}*/function $(id) {return typeof id === 'string' ? document.getElementById(id) : null;}})
</script>
</body>
</html>
Javascript特效:简易留言板相关推荐
- javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分 效果预览 html部分 <textarea name="text" cols="3 ...
- js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明 利用JavaScript.css以及html ...
- android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
- vue生命周期,组件,slot替换,tab切换,简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
- java 留言板源码_jsp+servlet+javabean实现简易留言板(包含数据库文件)
[实例简介] jsp+servlet+javabean实现简易留言板(包含数据库文件) 简单体验MVC设计模式 jsp:视图,与用户打交道:servlet:控制器,请求分配转发,联系视图层与模型层:j ...
- html简单留言板教程,JS实现简易留言板(节点操作)
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下 今天的案例主要是对节点进行操作 创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...
- JavaWeb简易留言板 servlet+ajax+mysql
使用servlet+ajax将数据存入数据库实现简易留言板 先上图~~ 加载界面同时加载历史留言 发表留言 字数超出限制禁用按钮 发表留言成功~ 下面贴代码 message_board.html &l ...
- [练习]简易留言板制作
[练习]简易留言板制作
- php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
- html简易留言,JS实现简易留言板特效
本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下 知识点 1.textarea 大段输入框 2.value获取输入框的值 3.innerHTML所用东西:innerText文 ...
最新文章
- PHP两种不同的快递运单号查询
- SAP ABAP老司机平时是怎么做代码审查的
- Linux 程 序 员 失 业 警 告
- Tour West Australia by Motorcycle
- 猫连接路由器路由下连七台电脑,为啥每台电脑手动设ip才有网?
- 广义表取表头表尾_数据结构广义表的递归算法
- 《游戏改变企业》一一第 2 章 实时的经济信息反馈(为什么游戏很重要) 游戏改变企业...
- LayaAir 事件 laya.events.Event
- Configure your new Fedora
- 成都KTV点歌类小程序开发公司,微信小程序开发
- “互联网+”大学生创新创业大赛项目策划书
- Python 身份证校验代码
- [转载]斐讯K2 A2版免TTL刷BREED不死Bootloader
- 语音识别百度阿里哪家强?识别率评测
- Savitzky-Golay 滤波器
- Matlab - Matlab中M文件的创建和调用
- 微软重新评估收购雅虎提议
- 模拟信道和数字信道的区别
- 小浩编程:指针函数和函数指针
- 队列fifo和lifo C语言数组实现
热门文章
- 防止用户直接访问url
- C# 匿名对象(匿名类型)、var、动态类型 dynamic
- Reinforcement Learning by David Silver 学记记录
- 第四期coding_group笔记_用CRF实现分词-词性标注
- paramiko模块执行linux下nohup卡住的问题。
- Linux执行命令./command与直接输入命令的区别
- dedecms注入漏洞 5.3 5.5
- .NET 应用从 Visual Studio 迁移到 Eclipse
- Thingsboard 3.1.0 - 规则链:转换数据结构
- 经典排序算法(十四)--梳排序Comb Sort