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 相关文章推荐
jquery入门—访问DOM对象方法
Jan 07 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
BootStrap中
Dec 10 Javascript
原生js编写2048小游戏
Mar 17 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
javascript实现放大镜功能
Dec 09 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
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
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
JS中的多态实例详解
2017/10/15 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python 画出来六维图
2019/07/26 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
初中三年毕业生的自我评价分享
2014/02/14 职场文书
暑假家长评语大全
2014/04/17 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
综治目标管理责任书
2015/05/11 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
心理学培训心得体会
2016/01/22 职场文书
导游词之唐山景点
2019/12/18 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android