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 dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
js闭包用法实例详解
Dec 13 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
linux下python抓屏实现方法
2015/05/22 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python实现单机五子棋
2020/08/28 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
保险公司早会主持词
2014/03/22 职场文书
农业生产宣传标语
2014/10/08 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
教你用python实现12306余票查询
2021/06/30 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript