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动态增加删除UL节点LI及相关内容示例
May 21 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
js实现特别简单的钟表效果
Sep 14 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
Apache设置虚拟WEB
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JS与C#编码解码
2013/12/03 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
基于Python解密仿射密码
2019/10/21 Python
Python生成器常见问题及解决方案
2020/03/21 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
21岁生日感言
2014/02/27 职场文书
小学生家长寄语
2014/04/02 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers