js模拟微博发布消息


Posted in Javascript onFebruary 23, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>js模拟微博发布消息</title>
  </head>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      width: 600px;
      height:auto;
      margin: 100px auto;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .box span{
      line-height: 36px;
    }
    input{
      width: 450px;
      padding: 10px;
    }
    .text-box {
      display: inline-block;
      width: 450px;
     text-align: left;
     min-height: 30px;
     line-height: 26px;
     border: 1px solid #ddd;
     padding: 3px 8px;
    }
    ul{
      margin: 20px auto;
      margin-left: 70px;
      width: 450px;
      list-style:none ;
    }
    li{
      border-bottom: 1px dashed #ddd;
      line-height: 34px;
      margin: 5px 0;
      overflow: hidden;
    }
    ul li .date{
      float: right;
      margin-right: 10px;
      font-size: 12px;
    }
    ul li a{
      float: right;
    }
    button{
      padding: 6px 12px;
    }
  </style>
  <body>
    <div class="box"id="box">
      <span>微博发布</span>
      <!--<input type="" name="" id="" value="" />-->
      <div contenteditable="true" class="text-box form-control"id="text-box"></div>
      <button>发布</button>
      <!--<ul>
        <li>
          123123
          <a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a>
          <span class="date">2017/2/22</span>
        </li>
      </ul>-->
    </div>
  </body>
</html>
<script type="text/javascript">
  window.onload=function(){
    var box=document.getElementById("box")
    var txt=document.getElementById("text-box");
    var btn=document.getElementsByTagName("button")[0];
    var ul=document.createElement("ul");
    box.appendChild(ul);
    btn.onclick=function(){
      if (txt.innerHTML=='') {
        alert('不能为空');
        return false;
      }
      var myDate = new Date();
      var time=myDate.toLocaleString();
      var li=document.createElement("li");
      ul.appendChild(li);
li.innerHTML=txt.innerHTML+'<a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a><span class="date">'+time+'</span>';
      txt.innerHTML='';
      var lis=ul.children;
      if (lis==0) {
        ul.appendChild(li);
      } else{
        ul.insertBefore(li,lis[0])
      }
//      删除功能
      var dele=document.getElementsByTagName("a");
      for (var k = 0; k < dele.length; k++) {
        dele[k].onclick=function(){
          ul.removeChild(this.parentNode);
        }
      }
    }
  }
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
详解JavaScript 事件流
Sep 02 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 #Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 #Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 #Javascript
js实现简单的选项卡效果
Feb 23 #Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 #Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
原生js制作简单的数字键盘
2015/04/24 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
3种python调用其他脚本的方法
2020/01/06 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python接口自动化测试的实现
2020/08/28 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
销售人员求职的自我评价分享
2014/03/15 职场文书
合作意向书格式及范文
2014/03/31 职场文书
学生评语大全
2014/04/18 职场文书
董事长秘书工作职责
2014/06/10 职场文书
森林防火宣传标语
2014/06/27 职场文书
交通安全责任书范本
2014/07/24 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
68句权威创业名言
2019/08/26 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript