美文网首页
模拟发表动态

模拟发表动态

作者: 张玉帅 | 来源:发表于2016-11-11 22:15 被阅读0次

要求:qq空间发表状态页面(在页面右上角显示你好,xxx用户)

1)状态页有若干条状态(样式内容自己随意发挥)

2)在输入框输入状态后,点击发表按钮,在所有说说最前面插入本条最新状态

3)每条状态下都有编辑按钮,点击后本条说说内容可被修改

4)每条状态下都有删除按钮,点击后弹框提示确定要删除本条说说吗,确定就删除,取消就不删除

<!doctype html>

<html>

    <head>

      <meta charset="UTF-8">

     <style>

            div{width: 900px;height: 20px;background: red;}

             h1{position: absolute;right: 0;top: 0;}

     </style>

    </head>

      <body>

               <input>

               <button>发表</button>

              <h1>你好,欢迎</h1>

             <script>

                      onload = function(evt){

                             var e = evt || event;

                            //获取文本框和发表按钮

                         var txt = document.getElementsByTagName("input")[0];

                        var btn1 = document.getElementsByTagName("button")[0];

                  //设置btn的单击事件,即将弹文本框中的内容追加到div中,并把div追加到docu

                      btn1.onclick = function(evt){

                               var e = evt || event;

                    //创建元素

                              var div = document.createElement('div');

                              var btn2 = document.createElement("button")

                              var btn3 = btn2.cloneNode(false);

                    //追加元素

                         document.body.appendChild(div);

                         div.innerHTML = txt.value;

                         div.appendChild(btn2);

                         div.appendChild(btn3);

                          btn2.innerHTML = "编辑"

                           btn3.innerHTML = "删除"

                   //编辑按钮

                    btn2.onclick = function(){

                          var divs = document.getElementsByTagName("div");

                           txt.value = "";

                            div.innerHTML = prompt("修改我吧:")

                           div.appendChild(btn2);

                         div.appendChild(btn3);

                         btn2.innerHTML = "编辑"

                      btn3.innerHTML = "删除"

                   }


                          //删除按钮

                      btn3.onclick = function(evt){

                     var e = evt || event;

                   if(confirm("您真的不要我了吗?")){

                    document.body.removeChild(div);

               }

        }

  }

}

            </script>

      </body>

</html>


相关文章

  • 模拟发表动态

    要求:qq空间发表状态页面(在页面右上角显示你好,xxx用户) 1)状态页有若干条状态(样式内容自己随意发挥) 2...

  • 爬虫系列(三十二):动态页面模拟点击

    动态页面模拟点击

  • JDK动态代理给Spring事务埋下的坑

    service 模拟动态代理事务 测试类 预测结果模拟事务:开启事务execute doLink模拟事务:关闭事务...

  • 静态链表及C#实现

    静态链表 静态链表是用数组模拟动态链表。 静态链表结构描述 首先,静态链表使用数组来模拟动态链表。数组存放一个节点...

  • 代理模式

    1.概念 2.静态代理 3.动态代理 3.1 JDK 动态代理 原理 手工模拟JDK动态代理 3.2cglib动态...

  • first

    发表第一条动态

  • 2019-04-10js题

    字体缩放 模拟聊天 图片切换 动态生成10个div

  • 2020-12-12

    北大信息学竞赛 编程科学:迭代模拟/递归/动态规划。

  • Selenium 的使用

    1.网站模拟登录 2.动态页面模拟点击 3.执行 JavaScript 语句 隐藏百度图片 模拟滚动条滚动到底部

  • 模拟登录豆瓣并发表短评

    准备 IDE:pycharm/sublime_text浏览器:谷歌/火狐 从登录页面出发 可以发现要实现豆瓣的登录...

网友评论

      本文标题:模拟发表动态

      本文链接:https://www.haomeiwen.com/subject/jniyyttx.html