JavaScrip+css3制作留言板

最新推荐文章于 2023-10-03 19:18:47 发布

置顶浅浅一笑^*^

最新推荐文章于 2023-10-03 19:18:47 发布

阅读量541

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105084194

版权

在这里插入图片描述

<style>
    div{
        width: 600px;
        border:1px solid #ccc;
    }
    p{
       font-weight: normal;
    }
    .time{
        text-align: right;
    }
</style>

<body>
<h1>留言板</h1>
用户名:<input type="text" id="ipt"><br><br>
<textarea name="" id="tar" cols="100" rows="10"></textarea><br>
<button id="btn">提交</button>
<br>
<div>
    <ul id="uls">
        <li>
            <h4>赵六</h4>
            <p>lean name for you are you are how are you</p>
            <p class="time">2019/8/12 0:12:00</p>
            <p class="time">删除</p>
        </li>
    </ul>
</div>

<script>
    //获取标签
    var ipt=document.getElementById("ipt");//用户名
    var tar=document.getElementById("tar");//文本域
    var btn=document.getElementById("btn");//提交
    var uls=document.getElementById("uls");//ul
    del();//页面一加载先删除所有的待删除数据
    //单击事件
    btn.onclick=function() {
        var timer=new Date().toLocaleString();//当前时间 //本地字符串
       var userName=ipt.value;//用户
       var text=tar.value;//内容
       var lis=document.createElement("li");//创建li标签
        if(userName==""||text==""){//非空判断
           alert("用户名或内容不能为空")
        }else{
            lis.innerHTML="<h4>"+userName+"</h4><p>"+text+"</p><p class='time'>"+timer+"</p><p class='time cc del'>删除</p>";
            uls.insertBefore(lis,uls.firstChild);
        }
        del();//单击事件之后调用
    };
    //删除事件
    function del() {
        var dels=document.getElementsByClassName("del");//好多删除选项 用循环 id会重名
        for(var i=0;i<dels.length;i++){
            dels[i].onclick=function() {
                this.parentNode.remove();//当前的父级元素删除
            }
        }
    }
    </script>

浅浅一笑^*^

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScrip+css3制作留言板

<style> div{ width: 600px; border:1px solid #ccc; } p{ font-weight: normal; } .time{ text-align: right; }</style><body><...
复制链接

扫一扫