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 相关文章推荐
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
Element Input组件分析小结
Oct 11 Javascript
js实现移动端图片滑块验证功能
Sep 29 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 SQL之where语句生成器
2009/03/24 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP序列化操作方法分析
2016/09/28 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python工厂函数用法实例分析
2018/05/14 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
销售部主管岗位职责
2013/12/18 职场文书
打架检讨书100字
2014/01/08 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
中学生演讲稿
2014/04/26 职场文书
团员自我评价范文
2015/03/10 职场文书
创业计划书之家政服务
2019/09/18 职场文书