简单版发布留言案例
时间:2019-08-21
本文章向大家介绍简单版发布留言案例,主要包括简单版发布留言案例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例分析:
- 页面组成:一个文本域,一个提交按钮,一个留言板
- 当点击提交按钮的时候,先判断文本域内容是不是空,如果是空,就警告
- 如果不是空,就新建一个li,然后把文本域的内容赋值给li,然后在ul里面的前面添加li
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 textarea { 14 width: 150px; 15 height: 100px; 16 margin-top: 100px; 17 margin-left: 100px; 18 border: 1px solid pink; 19 } 20 ul li { 21 background-color: pink; 22 width: 200px; 23 margin-top: 20px; 24 margin-left: 100px; 25 } 26 </style> 27 </head> 28 <body> 29 <textarea name="" id=""></textarea> 30 <button>发布</button> 31 <ul> 32 33 </ul> 34 <script> 35 //获取元素 36 var btn = document.querySelector('button'); 37 var text = document.querySelector('textarea'); 38 var ul = document.querySelector('ul'); 39 40 btn.onclick = function() { 41 if(text.value == '') { 42 alert('您没有输入内容') 43 return false; 44 } else { 45 //(1)创建元素 46 var li = document.createElement('li'); 47 //先有li,才能赋值 48 li.innerHTML = text.value; 49 //(2)添加元素 50 ul.insertBefore(li,ul.children[0]); 51 } 52 } 53 </script> 54 </body> 55 </html>
效果图
原文地址:https://www.cnblogs.com/cookie-bubble/p/11389480.html
- Spring Cloud Zuul重试机制探秘
- Eureka中RetryableClientQuarantineRefreshPercentage参数探秘
- Edgware.RC1中ZuulFallbackProvider的改进
- JPA的多表复杂查询:详细篇
- 尝试使用Memcached遇到的狗血问题
- Enumerable#Zip 实现一下
- 更新自己,不要影响其他人
- 【译】Spring官方教程:Spring Boot整合消息中间件RabbitMQ
- [实录]解决Migrator.Net 小bug
- Jenkins Pipeline插件十大最佳实践!
- Spring Cloud Hystrix的请求合并
- JQuery JCshare 0.1 分享插件
- Java中的即时编译(Just-in-time compilation)
- 无尽的忙碌换来幸福的日子
- 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 数组属性和方法
- 为Android系统添加config.xml 新配置的设置
- 浅析Android录屏 MediaRecorder
- 实用的网站开发工具导航源码,可以提高工作效率
- Github服务端和客户端完成本地代码上传至Github教程
- 一软在手截图无忧:ShareX截图神器-短小精悍功能完备 自动化任务可截动图截视频
- 使用SurfaceView实现视频弹幕
- 01 CentOS 7.6 切换系统语言
- Android双重SurfaceView实现弹幕效果
- SurfaceView播放视频发送弹幕并实现滚动歌词
- RecyclerView实现流式标签单选多选功能
- Android中AlertDialog四种对话框的最科学编写用法(实例代码)
- Android判断手机是否联网及自动跳转功能(收藏版)
- 使用Flutter实现一个走马灯布局的示例代码
- Android按钮美化样式的实现代码
- android自定义组件实现仪表计数盘