留言板的效果

最新推荐文章于 2022-11-25 14:41:31 发布

s_psycho

最新推荐文章于 2022-11-25 14:41:31 发布

阅读量612

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924206

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<input type="text">
<input type="button" value="留言">
<div class="box">
</div>
<script>
    var oIpt1=document.getElementsByTagName("input")[0];
    var oIpt2=document.getElementsByTagName("input")[1];
    var oDiv=document.getElementsByClassName("box")[0];
    oIpt2.onclick=function () {
        var oValue=oIpt1.value;
        var oTxt=document.createElement("div");
        var oFox=oDiv.getElementsByTagName("div")[0];
            oDiv.insertBefore(oTxt,oFox);
            oTxt.innerHTML=oValue+"<input type='button' value='删除'>";
        var oBut=document.getElementsByTagName("input");
        oBut[2].onclick=function () {
            oTxt.innerHTML=""
        }
    }
</script>
</body>
</html>