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

<script>

    window.onload = function()

    {

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

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

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

        oBtn.onclick = function()

        {

            // var aLi = oUl.getElementsByTagName('li');

            // 补写：

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

            // 先创建元素，再在后面用appendChild加给oUl

            // 赋值写反了！  oTxt.innerHTML = oLi.value; // 前面用的是aLi，这里怎么表示单个li的值

            oLi.innerHTML=oTxt.value;

            oTxt.value='';

            // if(aLi.length>0)

            if(oUl.children.length>0)

            {

                // oUl.insertBefore(li, aLi[0])

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

            }

            else

            {

                // oUl.appendChild('li');

                oUl.appendChild(oLi);

            }

            var iHeight = oLi.offsetHeight;

            oLi.style.height='0';  // ？？？

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

                startMove(oLi, {opacity: 100});

                // 调用的框架属性值用的json格式，所以这里要用花括号写。

            });

            // startMove(oLi, "height", iHeight, function()

            // {

            //     startMove(oLi, "opacity", 100)

            // },30);  // 运动框架后面括号没有时间，定时器才有。

        };

    };

    </script>