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 相关文章推荐
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
vue 内联样式style中的background用法说明
Aug 05 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 strtotime函数详解
2009/12/18 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python设计模式之原型模式实例详解
2019/01/18 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
基于Python正确读取资源文件
2020/09/14 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
机关出纳岗位职责
2014/04/03 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
个人作风建设自查报告
2014/10/22 职场文书
喋血孤城观后感
2015/06/08 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Python中glob库实现文件名的匹配
2021/06/18 Python