相信大家都遇见过留言板这个东西,一般来说开发过程中都会要求做这个模块,这里我把留言板的基本的功能做了一下,后续大家可以在里面添加更多的功能.
成果图展示
代码也在这,样式可以自己按照喜欢的改就行了,这里的样式只是一个成品,希望大家不要介意
<style>
.box{
position: relative;
margin: 100px auto;
width: 300px;
height: 500px;
/* border: 1px solid red; */
background-color: #95a5a6;
}
.box h4{
text-align: center;
color: white;
}
.box button{
background-color: #1abc9c;
position: absolute;
right: 10px;
top: 100px;
outline: none;
color: white;
border: 0;
cursor: pointer;
}
.box textarea{
outline: none;
resize: none;
margin-top: 20px;
margin-left: 30px;
width: 200px;
height: 100px;
color: gray;
}
.box li{
height: 30px;
width: 200px;
line-height: 30px;
list-style-type: none;
background-color: #BDC581;
padding-left: 8px;
color: white;
border-radius: 5px;
margin-top: 5px;
}
</style>
--------------html------------------------
<body>
<div class="box">
<h4>留言板</h4>
<textarea rows="30" cols="20" value=""></textarea>
<button>留言</button>
<ul></ul>
</div>
--------------JS模块-------------------
<script>
var btn = document.querySelector("button");
var txt = document.querySelector("textarea");
var ul = document.querySelector("ul");
// console.log(btn);
// console.log(txt);
btn.onclick = function(){
if(txt.value == ""){
alert("您还没有输入内容哦");
return false;
}else{
//创建元素
var li =document.createElement("li");
//添加元素
li.innerHTML =txt.value;
ul.appendChild(li); //如果想添加在前面显示就可以用insertBefore();
}
txt.value = "";
}
</script>