<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. python + eclipse + django + postgresql 开发网站（二）

    引用与参考 http://www.cnblogs.com/lanxuezaipiao/p/3283932.html python2.7  django1.6 1.新建Django项目

  2. Swift之 vm10虚拟机安装Mac OS X10.10教程

    VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift .   近期WWDC放出终极大招--新的编程语言Swift(雨燕),导致一大波程序猿 ...

  3. Bmob移动后端云服务平台--Android从零開始--(一)何为Bmob

    Bmob移动后端云服务平台--Android从零開始--(一)何为Bmob 在正式的项目开发中,单client不能满足我们的需求,须要实现client与服务端的连接. 而在编写Android服务端代码 ...

  4. 关于router-link的传参以及参数的传递

    1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}& ...

  5. 51.cgi网站后门

    运行截图: html开发: <html> <body> <form id="form" name="form" method=&q ...

  6. 【DRF认证】

    目录 认证组件的详细用法 本文详细讲述了DRF认证组件的原理以及用法. @ * 源码剖析** 上一篇博客讲解DRF版本的时候我们都知道了,在dispatch方法里执行了initial方法来初始化我们的 ...

  7. Linux运维命令总结

    .什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常, 在他运转的过程中,对他进行维护,他集合了网络.系统.数据库.开发.安全.监控于一身 ...

  8. [Express] Upload Files with Express

    In this lesson we create a new Express web server app for handling file uploads and persisting them ...

  9. Android开发经验之在图片上随意点击移动文字

    只要在图片范围之内,文字可随意点击移动. package xiaosi.GetTextImage; import android.content.Context; import android.con ...

  10. cookie和session笔记

    1.http协议是无连接的,即每一次http请求都是新的,和上一次没有联系,这不利于和用户的交互.针对这一缺点产生了cookie. 2.cookie是一段保存在客户端上的验证信息,同一个域使用同一个c ...