码迷,mamicode.com
首页 > 其他好文 > 详细

简易留言板

时间:2018-06-16 10:36:39      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:blog   alt   var   java   lap   https   targe   签名   tar   

编辑本博客

  • this.value获取表单控件值
  • this.appendChild()为标签添加子标签
  • this.getElementsByTagName()通过标签名获取所有标签,this.length统计长度,[0]取第一个元素
  • this.insertBefore(),在一个元素之前插入新元素
  • this.parentNode获取父节点
  • this.removeChild()移除子节点
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
</head>
<body>
    <h4>YY留言板</h4>
    <div id="box">
    </div>
    <textarea id="msg"></textarea>
    <input type="button" id="btn" value="留言">
    <button type="button" onclick="count()">统计留言数</button>
</body>
<script type="text/javascript">
    var ul=document.createElement("ul");
    var box=document.getElementById("box");
    box.appendChild(ul);
    var counts=0;
    var btn=document.getElementById(btn);
    var msg=document.getElementById(msg)
    btn.onclick=function (ev) {
        var content=msg.value;
        var li=document.createElement(li)

        li.innerHTML=content+"<span>&nbsp;&nbsp;&nbsp;X</span>";

        var lis=document.getElementsByTagName("li");
        if(lis.length==0){
            ul.appendChild(li);
            counts++;
        }else {
            ul.insertBefore(li,lis[0]);
            counts++;
        }
        msg.value="";
        //添加li标签后动态给设置onclick属性

        var spans=document.getElementsByTagName("span");
        for(i=0;i<spans.length;i++){
            spans[i].onclick=function () {
                ul.removeChild(this.parentNode);
                counts--;
            }
        }
    };

    function count() {
        alert("一共发布了"+counts+"条留言");
    };
</script>
</html>
View Code

 

简易留言板

标签:blog   alt   var   java   lap   https   targe   签名   tar   

原文地址:https://www.cnblogs.com/yaya625202/p/9189734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!