简单的留言板

制作一个简单的留言板，用户在输入框中输入内容，提交，然后内容显现在box里面

依然首先需要获取到输入框，提交按钮，box；

然后给提交按钮设置点击事件；

获取输入框的内容；

显示到box中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{width: 100px;height: 100px;border: 1px solid #000;width: 200px}
    </style>
</head>
<body>
    <input type="text" name="" id="text1">
    <input type="button" name="" id="but" value='提交'>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload=function(){
            var text1 = document.getElementById("text1");    // 
            var but = document.getElementById("but");　　　　　//
            var box = document.getElementById("box");　　　　　//  ==>获取到输入框，提交按钮，box
            but.onclick=function(){　　　　　　　　　　　　　　　　//　==>给提交按钮设置点击事件
                var val = text1.value;　　　　　　　　　　　　　　//声明变量val等于输入框的内容
                var newText = '<p>' + val + '</p>'　　　　　　　//声明变量newText等于新的内容
                box.innerHTML = box.innerHTML + newText　　　　//box的innerHTML =以前的内容+新的内容
            }
        }
    </script>
</body>
</html>

box.innerHTML = box.innerHTML + newText：新的内容显示在老的内容下面，如果要把新的内容显示在老的内容的上面，把box.innerHTML和newText的位置换一下就行了

box.innerHTML ='你好'。这个显示出来就是在box中出现你好，从html里面来看，是在div中生成了一个p标签，内容是”你好“，如果内容为变量，如上面代码一样，是var val = text1.value，如果写成box.innerHTML ='val'，并不能显示成获取到的内容，显示的内容仅仅是val而已

所以就涉及到了，字符串的拼接如：box.innerHTML =''+val+'';

posted on 2016-08-17 00:39 7-Eleven 阅读(144) 评论(0) 编辑收藏举报