美文网首页
js运动8 简单发状态

js运动8 简单发状态

作者: maomizone | 来源:发表于2017-03-20 15:45 被阅读0次
  • 发状态时判断内容是否为空
  • 发布成功在状态栏里面有先下拉后透明度变大的效果

HTML (css样式忽略)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>发状态</title>
    <script src="js/move2.js"></script>
</head>
<body>
<div>
    <textarea id="txt" cols="40"></textarea>
    <br/>
    <button id="btn">发布</button>
</div>

<div>
    <h2>状态栏</h2>
    <ul id="ul"></ul>
</div>

</ul>
</body>
</html>

JS

   <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            var btn = document.getElementById("btn");
            var ul = document.getElementById("ul");
            var lis = ul.getElementsByTagName("li");

            btn.onclick = function(){
                if(txt.value.trim() == ""){
                    alert("请输入");
                    return;
                }
                var li = document.createElement("li");
                li.innerHTML = txt.value;

                if(lis.length == 0){
                    ul.appendChild(li)
                }else{
                    ul.insertBefore(li, lis[0]);
                }
                var iHeight = li.offsetHeight;
                li.style.height = 0;
                move(li,{height: iHeight}, function(){
                    move(li, {opacity: 100});
                })

            }

        }
    </script>

效果

jsSport9.gif

相关文章

  • js运动8 简单发状态

    发状态时判断内容是否为空 发布成功在状态栏里面有先下拉后透明度变大的效果 HTML (css样式忽略) JS 效果

  • js的简单运动

  • Cocos游戏笔记(三):js设置动画

    一 . 最简单的js动画 上面的代码展现了singleFood在0.5s的时间里进行了从当前状态运动到 x = 4...

  • 连续作业

    不知不觉在船上待了有8天了,感觉这8天每天过的时间很紧凑,24小时连轴作业,船是个运动状态,任何时候都有突发情况发...

  • Vue.js状态管理工具Vuex快速上手

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue2简单入门

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue.js再入门

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue.js使用vue-router构建单页应用

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • js面试

    ?xml version="1.0" encoding="UTF-8"? Js: 1、数据类型 简单类型:Numb...

  • React MobX 开始

    MobX[https://mobx.js.org/] 用于状态管理,简单高效。本文将于 React 上介绍如何开始...

网友评论

      本文标题:js运动8 简单发状态

      本文链接:https://www.haomeiwen.com/subject/infinttx.html