微博发布案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博发布</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            height: auto;
            border: 1px solid #ccc;
            margin: 100px auto;
            text-align: center;
            padding: 30px 0;
            background-color: #666699;
        }

        .box textarea {
            width: 450px;
            resize: none; /*设置文本不能过拖动*/
        }

        .box li {
            width: 500px;
            line-height: 30px;
            border-bottom: 1px dashed #ccc;
            margin-left: 80px;
            text-align: left;
        }

        .box li a {
            float: right;
        }

        button {
            width: 60px;
            height: 30px;
            background-color: #ccc;
            border: 1px solid #ccc;
            outline: none;
        }
    </style>

    <script type="text/javascript">

        window.onload = function () {
            //获取数组的第一个
            var btn = document.getElementsByTagName("button")[0];
            var txt = document.getElementsByTagName("textarea")[0];
            var ul = document.createElement("ul");
            btn.parentNode.appendChild(ul); //添加子节点
            btn.onclick = function () {
                //1.需要判断文本中是否有内容
                if (txt.value == "") {
                    alert("内容不能为空");
                    return false;
                }
                var newli = document.createElement("li");
                newli.innerHTML = txt.value + "<a href=‘javascript:;‘>删除</a>";
                ul.appendChild(newli);
                txt.value = "";
                var aa = document.getElementsByTagName("a");
                for (var i = 0; i < aa.length; i++) { // 遍历点击删除
                    aa[i].onclick = function () {
                        this.parentNode.remove();
                    }
                }
            }
        }

    </script>
</head>
<body>
<div class="box">
    <p>微博发布</p>
    <textarea name="" id="" cols="30" rows="10"></textarea></br>
    <button>发布</button>
</div>
</body>
</html>

原文地址：https://www.cnblogs.com/miss-yang/p/10305401.html

时间： 2024-11-08 09:03:40

微博发布案例的相关文章

jq 微博发布评论案例

综合案例：微博发布新鲜事

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 width: 600px; 13 border: 1px solid bl

学前端开发：js 原生模仿微博发布

初学前端开发,需要掌握的基础项目案例:js 原生模仿微博发布 <!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title></title> </head> <styletype="text/css"> *{ margin:0; padding:0; list-style:none; font-family:&quo

VUE实现微博发布效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>微博发布效果</title> <style> body, ul, p { margin: 0; padding: 0; } .weibo { width: 600px; border: 1px solid #ccc; margin: 100px auto; padding: 10px;

[js高手之路]设计模式系列课程-委托模式实战微博发布功能

在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 1 <ul> 2 <li>跟着ghostwu学习javascript设计模式的应用1</li> 3 <li>跟着ghostwu学习javascript设计模式的应用2</li> 4 <li>跟着ghostwu学习javascript设计模式的应用3</li&g

第32天：微博发布动态

微博发布动态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style> ul{ list-style:none; } *{ margin: 0; padding: 0; } .box{ margin:100px auto; width: 600px; heigh

js微博发布框的实现

引用前请标明出处:http://www.cnblogs.com/zkhzz/ 谢谢观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时发布框颜色为暗色 3.文字不符合标准时提交不通过整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时触发 2.onmouseover()// 鼠标滑到发布触发 3.onmouseout() //鼠标离开发布时触发 4.onfocus() //点击到输入框时触发 5.onblur() //点击到输入

微博发布代码

原生JavaScript 全特效微博发布面板效果实现

javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件动态添加元素,获取设置动态属性基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s