day-3.2 文本留言框案例

文本框留言案例：

 1 <!doctype html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="Generator" content="EditPlus®">
 6         <meta name="Author" content="">
 7         <meta name="Keywords" content="">
 8         <meta name="Description" content="">
 9         <title>Document</title>
10         <style>
11             *{margin:0;padding:0;}
12             body{font:12px '微软雅黑';}
13             ul{list-style:none;}
14             a{text-decoration:none;color:#000;}
15             .clearfix:after{content:'';display:block;clear:both;}
16             #wrap {
17                 width:400px;
18                 height:600px;
19                 margin:200px auto;
20             }
21             #text {
22                 width:100%;
23                 height:200px;
24             }
25             #btn{
26                 width:50px;
27                 height:20px;
28                 float:right;
29             }
30             #list{
31                 
32                 margin-top:30px;
33             }
34             #list li {
35                 height:30px;
36                 line-height:30px;
37                 border-bottom:1px solid #ccc;
38             }
39     </style>
40 </head>
41     <body>
42         <div id="wrap">
43             <textarea id="text">
44             </textarea>
45             <input id="btn" type="submit" value = "提交">
46             <ul id="list" >
47                 <!---<li>123123</li>
48                 <li>123123</li>
49                 <li>123123</li> --->
50 
51             </ul>
52         </div>
53         <script>
54             var    oText = document.getElementById("text"),
55                 oBtn = document.getElementById("btn"),
56                 oList = document.getElementById("list");                
57                 oBtn.onclick = function (){
58                     oList.innerHTML += "<li>"+oText.value+"</li>";
59                 };                                
60                 oText.value= "";
61         </script>
62     </body>
63 </html>

 

posted @ 2018-05-18 20:41  bibiguo  阅读(100)  评论(0)    收藏  举报