<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>留言板</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.wapr{
width: 300px;
margin: 50px auto 0;
color: white;
}
.wapr h2{
text-align: center;
height: 40px;font-size: 24px;font-weight: normal;line-height: 40px;background: #CD853F;}
.wapr textarea{width: 298px;height: 60px;resize: none;}
.wapr input{height: 40px;width: 300px;margin-bottom: 20px;}
.wapr ul{
width: 258px;
padding: 0 20px;
border-top: 1px solid #CD853F;
}
.wapr li{font-size: 14px;line-height: 28px;border-bottom: 1px solid #CD853F;color: black;}
.wapr li:nth-of-type(2n){background: beige;}
</style>
</head>
<body>
<div class="wapr">
<h2>留言板</h2>
<textarea id="text"></textarea>
<input type="button" value="发送" id="btn" />
<ul id="list">
</ul>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var text=document.querySelector('#text')
var btn=document.querySelector('#btn')
var list=document.querySelector('#list')
btn.onclick=function(){
var val=text.value;
if(text.value==""){
alert("请输入内容")
}else{
list.innerHTML+='<li>'+val+'</li>';
text.value=""
}
}
}
</script>
</html>