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 相关文章推荐
jQuery each()小议
Mar 18 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jquery easyui使用心得
Jul 07 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
js时间查询插件使用详解
Apr 07 Javascript
JS实现音乐钢琴特效
Jan 06 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在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
python海龟绘图实例教程
2014/07/24 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
Python argv用法详解
2016/01/08 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python小白学习包管理器pip安装
2020/06/09 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
介绍一下write命令
2014/08/10 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
面试必备的求职信
2014/05/25 职场文书
社区志愿者培训方案
2014/06/10 职场文书
质量管理标语
2014/06/12 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
男方婚前保证书
2015/02/28 职场文书
环保守法证明
2015/06/24 职场文书
校运会宣传稿大全
2015/07/23 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android