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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
document.all与WEB标准
May 13 Javascript
javascript事件模型代码
Jul 01 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
Node.js Domain 模块实例详解
Mar 18 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
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
详解微信UnionID作用
2019/05/15 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python 列表的清空方式
2020/01/13 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
销售自荐信
2013/10/22 职场文书
微观物理专业自荐信
2014/01/26 职场文书
公务员保密承诺书
2014/03/27 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript