<style>

    *{ margin: 0; padding: 0;}

    #ul1{

        width: 400px;

        height: 400px;

        border: 1px solid #000;

        margin: 10px auto;

        padding: 4px;

        overflow: hidden;

    }

    /* #ul li 选择器写错了！！！ */  

    #ul1 li{

        border-bottom: 1px #999 dashed;

        padding: 4px;

        list-style: none;

        overflow: hidden;

        filter:alpha(opacity=0);

        opacity: 0;

        /* border-bottom: 1px dashed;  border没有设置颜色！！！ */

        /* filter: alpha = 0; 格式错误！！ */

    }

    </style>

    <script src="move2.js"></script>

    <script>

    window.onload = function()

    {

        var oTxt = document.getElementById('txt1');

        var oBtn = document.getElementById('btn1');

        var oUl = document.getElementById('ul1');

        oBtn.onclick = function()

        {

            var oLi = document.createElement('li');

            oLi.innerHTML = oTxt.value;

            oTxt.value = '';

            if(oUl.children.length>0)

            {

                // oUl.insertBefore(oLi, oUl.childNodes[0])

                // 注意childNodes 和 children的区别

                oUl.insertBefore(oLi, oUl.children[0]);

            }

            else

            {

                oUl.appendChild(oLi); // 添加的子节点值是不是这样写的？

            };

            var iHeight = oLi.offsetHeight;

            oLi.style.height = '0';

            startMove(oLi, {height: iHeight}, function()

            {

                startMove(oLi, {opacity: 100})

            });

        };

    };

    </script>

</head>

<body>

<textarea id="txt1" cols="30" rows="4"></textarea>

<input type="button" value="发布" id="btn1">

<ul id="ul1"></ul>

</body>

JS错误记录 - 微博发布的更多相关文章

  1. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  2. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  3. JS错误记录 - dom操作 - 排序

    本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...

  4. JS错误记录 - 事件 - 拖拽

    错误总结: 1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...

  5. JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动

    本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...

  6. JS错误记录 - getStyle代替offset、任意值运动框

    本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器.  不是在新定时器开启之后再清除 ...

  7. JS错误记录 - To-do List

    var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...

  8. JS错误记录 - fgm练习 - 函数传参

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; v ...

  9. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

随机推荐

  1. Linux下安装Go环境

    登录Linux Mac或Linux的用户可以用命令ssh root@xxx.xxx.xxx.xxx登录主机Window的用户可以使用SecureCRT登录主机虚拟机用户直接打开你的虚拟机 安装Go环境 ...

  2. HBase概念学习（八）开发一个类twitter系统之表设计

    这边文章先将可能的需求分析一下,设计出HBase表,下一步再開始编写client代码. TwiBase系统 1.背景 为了加深HBase基本概念的学习,參考HBase实战这本书实际动手做了这个样例. ...

  3. Spark MLlib Deep Learning Convolution Neural Network (深度学习-卷积神经网络)3.3

    3.Spark MLlib Deep Learning Convolution Neural Network(深度学习-卷积神经网络)3.3 http://blog.csdn.net/sunbow0 ...

  4. python 补0的方法

    # 方法一 z = 'bb' z.zfill(6) ----'0000bb' n = ' n.zfill(5) ----' # 方法二 ' " ---- ＇报错＇ # 方法的区别 方法二只能 ...

  5. 洛谷——P1525 关押罪犯

    https://www.luogu.org/problem/show?pid=1525 题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间 ...

  6. python生成md5, shell生成md5

    echo -n 'aaa'|md5sum|cut -d ' ' -f1 python用hashlib md5=hashlib.md5(mid.upper()).hexdigest().upper()

  7. CDN服务上线，DNSPOD布局云端生态圈

    爱因斯坦曾说过,我从不去想未来,由于它来得已经够快的了.是的,随着互联网的高速发展,我们的生活节奏越来越快,可是人们的耐心却像鞋底一样越磨越薄. 遥控器按一下,鼠标点一下,仅仅要认为没意思或者等待时间 ...

  8. PHP 实现断点续传的原理和方法

    PHP 实现断点续传的原理和方法 0. http协议从1.1开始支持静态获取文件的部分内容,为多线程下载和断点续传提供了技术支持.它通过在Header里两个参数实现的,客户端发请求时对应的是Accep ...

  9. js37---Function.prototype

    //给函数的prototype新增名字为name,函数体为fn的函数 Function.prototype.method =function(name,fn){ this.prototype[name ...

  10. js--递归详解

    1 函数的调用 eg1:阶乘算法 var f = function (x) { if (x === 1) { return 1; } else { return x * f(x - 1); } }; ...