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代码
May 22 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
js实现选项卡效果
Mar 07 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
header跳转和include包含问题详解
2012/09/08 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php单例模式的简单实现方法
2016/06/10 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
基于jquery实现的自动补全功能
2015/03/12 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
什么是Remote Module
2016/06/10 面试题
综合实践教学反思
2014/01/31 职场文书
网络信息安全承诺书
2014/03/26 职场文书
商场促销活动策划方案
2014/08/18 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
2015新学期家长寄语
2015/02/26 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
初中毕业感言300字
2015/07/31 职场文书
《司马光》教学反思
2016/02/22 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
django 认证类配置实现
2021/11/11 Python