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 相关文章推荐
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
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和XSS跨站攻击的防范
2007/04/17 PHP
附件名前加网站名
2008/03/23 PHP
PHP 组件化编程技巧
2009/06/06 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
python虚拟环境完美部署教程
2019/08/06 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
什么是Python中的匿名函数
2020/06/02 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
教师党员思想汇报
2014/01/06 职场文书
运动会广播稿50字
2014/01/26 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python