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

最新推荐文章于 2022-07-14 14:35:35 发布

转载最新推荐文章于 2022-07-14 14:35:35 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/carpenterzoe/p/10220211.html

文章标签：

#json

本文介绍如何使用JavaScript动态创建列表项，并通过DOM操作将其添加到页面中，实现列表项的平滑展开效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>