<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. SpringBoot @PathVariable 和 @requestParam区别

    1.若获取的入参的 参数 是下面这种形式 就使用 @requestParam 去获取 参数‘1’ /user?id=1 // url:xxx/user?id=1 @RequestMapping(&qu ...

  2. 【Codeforces Round #460 (Div. 2) B】 Perfect Number

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 直接暴力求出第k个perfect数字就好. 纯模拟. [代码] #include <bits/stdc++.h> #de ...

  3. LeetCode 258 Add Digits（数字相加，数字根）

    翻译 给定一个非负整型数字,反复相加其全部的数字直到最后的结果仅仅有一位数. 比如: 给定sum = 38,这个过程就像是:3 + 8 = 11.1 + 1 = 2.由于2仅仅有一位数.所以返回它. ...

  4. hdu5305 Friends(dfs+map/hash)

    题目:pid=5305">http://acm.hdu.edu.cn/showproblem.php?pid=5305 题意:给定N个人和M条朋友关系,是朋友关系的两个人之间有两种联系 ...

  5. vim 基础学习之普通模式

    .操作 = 操作符 + 动作 aaa bbb例如,d是删除命令,b是移动到距离光标最近的字符串开头当我们执行db的时候,就会删除光标(不包括光标位置)到最近字串开头之间的字符dj则会删除光标所在行以及 ...

  6. Extjs在HtmlEditor的工具栏上插入自定义按钮

    Ext.ns('Ext.ux.form.HtmlEditor');Ext.ux.form.HtmlEditor.HR =Ext.extend(Ext.util.Observable,{ init:fu ...

  7. vue --- 全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...

  8. POJ 3051 DFS

    题意:判断连通块大小 水题 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm ...

  9. Myeclipse学习总结（3）——Myeclipse中的代码格式化、注释模板及保存时自动格式化

    设置Myeclipse中的代码格式化.注释模板及保存时自动格式化 1:设置注释的模板: 下载此模板:  codetemplates.xml This XML file does not appear ...

  10. [Redux-Observable && Unit testing] Testing the output of epics

    Epics can be unit-tested just like any other function in your application - they have a very specifi ...