简易微博发布效果

最新推荐文章于 2024-06-29 11:02:00 发布

真的没有好分享的

最新推荐文章于 2024-06-29 11:02:00 发布

阅读量120

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wangyuan_111/article/details/126508603

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ margin: 0; padding:0;}
        li{ list-style: none;}
        a{ text-decoration: none;}

        #list{ width: 400px; height: 500px; border: 1px solid #000;}
        #list li{ padding: 10px 10px 25px; border-bottom: dashed 1px #ccc; position: relative; font:14px/20px '微软雅黑'; overflow: hidden; word-break: break-all;}
        #list li span{ position: absolute; bottom: 0; left:10px; font:12px/25px '微软雅黑'; color: #666;}
        #list li a{ position: absolute; font-size:12px; bottom: 0;right: 10px; line-height: 25px;}
    </style>
    <script src="./mystore.js"></script>
    <script>
        window.onload = function(){
            var oMsg = document.getElementById('txt');
            var oBtn = document.getElementById('btn');
            var oUl = document.getElementById('list');

            oBtn.onclick = function(){
                if(oMsg.value == ''){
                    return;
                }

                var oDate = new Date();
                var y = oDate.getFullYear();
                var m = oDate.getMonth() + 1;
                var d = oDate.getDate();

                y = y < 10 ? '0' + y : '' + y;
                m = m < 10 ? '0' + m : '' + m;
                d = d < 10 ? '0' + d : '' + d;

                var dateStr = `${y}年${m}月${d}日`;

                var oLi = cEl('li');
                oLi.innerHTML = oMsg.value;
                oLi.appendChild(cEl('span', dateStr));
                var oDel = cEl('a', '删除');
                oDel.href = 'javascript:;';
                oDel.onclick = function(){
                    this.parentNode.remove();
                }

                oLi.appendChild(oDel);

                oUl.insertBefore(oLi, oUl.children[0]);

                oMsg.value = '';
            }
        }
    </script>
</head>
<body>
    <textarea name="" id="txt" cols="50" rows="5"></textarea> 
    <button id="btn">发布</button>
    <ul id="list">
        <!-- <li>
            萨拉快递费就拉萨解放拉萨解放路就撒法律记录
            <span>2021年07月26日</span>
            <a href="javascript:;">删除</a>
        </li> -->
    </ul>
</body>
</html>