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日期处理函数
Oct 16 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
javascript实现左右缓动动画函数
Nov 25 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python算法应用实战之栈详解
2017/02/04 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
公司租房协议书范本
2014/10/08 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
销售合作意向书范本
2015/05/08 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python