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中this关键字(翻译+自我理解)
Oct 20 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JS制作简单的三级联动
Mar 18 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
JavaScript cookie原理及使用实例
May 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
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python 获取div标签中的文字实例
2018/12/20 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python字典排序的方法
2019/10/12 Python
美国折扣网站:jClub
2017/08/07 全球购物
诉前财产保全担保书
2014/05/20 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
活动总结新闻稿
2014/08/30 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
护理专业自荐信范文
2015/03/06 职场文书
一个都不能少观后感
2015/06/04 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers