JavaScript简单实现的仿微博留言功能示例


Posted in Javascript onJanuary 17, 2019

本文实例讲述了JavaScript简单实现的仿微博留言功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微博留言</title>
</head>
<script>
window.onload=function(){
  var text=document.getElementById('text');
  var btn =document.getElementById('btn');
  var oul =document.getElementsByClassName('content')[0];
  btn.onclick=function(){
    var oli= document.createElement('li')
    oli.innerHTML=text.value;
    var arr= document.getElementsByTagName('li');
    if(arr.length>0){
      oul.insertBefore(oli,arr[0])
    }else{
      oul.appendChild(oli)
    }
  }
}
</script>
<body>
  <input type="text" placeholder="请输入您的留言" id="text" />
  <input type="button" value="留言" id="btn">
  <ul class="content">
  </ul>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript简单实现的仿微博留言功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
vue权限管理系统的实现代码
Jan 17 #Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 #Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 #Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 #Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 #Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 #Javascript
如何能分清npm cnpm npx nvm
Jan 17 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php中变量及部分适用方法
2008/03/27 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Vue中$refs的用法详解
2018/06/24 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Vue3.0的优化总结
2020/10/16 Javascript
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
PyQt5每天必学之组合框
2018/04/20 Python
基于python生成器封装的协程类
2019/03/20 Python
python导入pandas具体步骤方法
2019/06/23 Python
python中web框架的自定义创建
2019/09/08 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
物业管理大学生个人的自我评价
2013/10/10 职场文书
应届护士求职信范文
2014/01/26 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
公司酒会致辞
2015/07/30 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python