javascript實現留言板功能

來源：懂視網責編：小OO 時間：2020-11-27 20:18:18

javascript實現留言板功能

每天一個JS 小demo之留言板。主要知識點：DOM方法的理解和運用。<；，0，0，.5)}<；/style>；<；script type="；text/javascript"；>；window.onload = function(){var btn = document.querySelector('；input'；)；var text = document.querySelector('；textarea'；)；var list = document.querySelector('；#list'；)；var colors = ["；red"；，就讓a標簽顯示出來。

推薦度：

點擊下載本文 文檔為doc格式

導讀每天一個JS 小demo之留言板。主要知識點：DOM方法的理解和運用。<；，0，0，.5)}<；/style>；<；script type="；text/javascript"；>；window.onload = function(){var btn = document.querySelector('；input'；)；var text = document.querySelector('；textarea'；)；var list = document.querySelector('；#list'；)；var colors = ["；red"；，就讓a標簽顯示出來。

這篇文章主要為大家詳細介紹了JS實現留言板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

每天一個JS 小demo之留言板。主要知識點：DOM方法的理解和運用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap {
width: 400px;
margin: 30px auto;
}
textarea {
display: block;
width: 100%;
height: 60px;
}
input {
display: block;
width: 60%;
margin: 15px auto;
}
li {
padding: 5px 10px;
position: relative;
word-break: break-all;
}
.red {
color: #000;
background: #f1f1f1;
} 
.pink {
color: #000;
background: #ccc;
}
a {
position: absolute;
right: 0;
top: -20px;
background: yellow;
color: #fff;
} 
#list {
margin: 0;
padding: 0;
list-style: none;
font: 14px/26px "宋體";
}
.clos {
position: absolute;
top: 0;
right: -50px;
width: 50px;
color: #fff;
background: #000;
padding: 5px 0;
text-decoration: none;
text-align: center;
}
.clos:hover {
box-shadow: 0 0 5px rgba(0,0,0,.5)
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.querySelector('input');
var text = document.querySelector('textarea');
var list = document.querySelector('#list');
var colors = ["red","pink"];
var nub = 0;
btn.onclick = function(){
if(text.value.trim() == ""){
alert("打點字吧");
return false;
}
var li = document.createElement("li");
li.innerHTML = text.value;
// li.className = colors[nub%colors.length];
/* 判斷a標簽已經被添加，就讓a標簽顯示出來，否則就添加 */
if(list.children[0]&&list.children[0].className=="red"){
li.className = "pink";
} else {
li.className = "red";
}
var a = null;
li.onmouseover = function(){
if(a) {
a.style.display = "block";
} else {
a = document.createElement("a");
a.href = "javascript:;";
a.className = "clos";
a.innerHTML = "刪除";
a.onclick = function (){
list.removeChild(this.parentNode);
};
this.appendChild(a);
}
};
li.onmouseout = function(){
a.style.display = "none";
};
list.insertBefore(li,list.children[0]);
text.value = "";
nub++;
};
}; 
</script>
</head>
<body>
<p>
<p class="wrap">
<textarea id="text"></textarea>
<input type="button" value="創建元素">
<ul id="list"></ul>
</p> 
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript實現留言板功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：留言實現 js

熱門焦點

javascript實現留言板功能

javascript實現留言板功能

javascript實現留言板功能

最新推薦

猜你喜歡

熱門推薦