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 相关文章推荐
JS继承 笔记
Jul 13 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
JavaScript流程控制(循环)
Dec 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
js输出列表实现代码
2010/09/12 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python线性回归实战分析
2018/02/01 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
物业管理公司实习生自我鉴定
2013/09/19 职场文书
读群众路线心得体会
2014/03/07 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
网络营销计划书
2015/01/17 职场文书
构建和谐校园倡议书
2015/01/19 职场文书