<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. 【Henu ACM Round#14 F】 President and Roads

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理出起点到任意点的最短路以及最短路条数=>dis[0][i],cnt[0][i] 然后 把所有的边反向 处理出在反图上终点到 ...

  2. swift 编译提前定义 --不知道怎么定义，可是能够#if

    var v:Int; #if _COND//不知道怎么定义.可是能够#if v = ; #else ; #endif println(v);//2

  3. 刘汝佳 算法竞赛-入门经典 第二部分 算法篇 第六章 2（Binary Trees）

    112 - Tree Summing 题目大意:给出一个数,再给一颗树,每个头节点的子树被包含在头节点之后的括号里,寻找是否有从头节点到叶子的和与给出的数相等,如果有则输出yes,没有输出no! 解题 ...

  4. POJ 2374 线段树建图+Dijkstra

    题意: 思路: 线段树+Dijkstra(要堆优化的) 线段树要支持打标记 一个栅栏 拆成两个点 :左和右 新加一个栅栏的时候 看看左端点有没有被覆盖过 如果有的话 就分别从覆盖的那条线段的左右向当前 ...

  5. HDU 4007 Dave（离散化）

    Dave Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others)Total Submis ...

  6. java 第三方库

    转载自http://www.cnblogs.com/lucus-jia/p/3483511.html java 第三方库   总结一下常用的java第三方库,方便查询和使用,欢迎补充. 1.核心库 A ...

  7. JavaScript--数据结构算法之链表

    数组的缺点:数组的长度固定,增删时比较困难要移动元素,而且数据填满再添加元素比较复杂.js:数组有split(),可以任意的分割.不存在上述问题.主要问题是:js数组都被实现成了对象,和其他语言的数组 ...

  8. Dubbo学习总结（3）——Dubbo-Admin管理平台和Zookeeper注册中心的搭建

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  9. ArcGIS中数据之间的转换接口IFeatureDataConverter2

    之前我写过一篇文章关于ArcGIS各种空间数据格式之间转换的通用方法:ArcGIS中sde,mdb,shp数据之间的转换.这里使用的主要接口方法就是用到了IFeatureDataConverter接口 ...

  10. 火狐—火狐浏览器中的“HttpWatch”

    在IE下通过HttpWatch能够查看HTTP请求的相关细节.这对我们分析程序的运行效率很有帮助,但是在火狐浏览器中的难道就没有相似的工具了吗?答案是否定的--火狐浏览器中也有.在火狐浏览器中该工具叫 ...