JS實現(xiàn)留言板功能
更新時間：2017年06月17日 09:14:16 作者：catEatBird
這篇文章主要為大家詳細介紹了JS實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
每天一個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>
<div>
<div class="wrap">
<textarea id="text"></textarea>
<input type="button" value="創(chuàng)建元素">
<ul id="list"></ul>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要是對js判斷ie版本號的簡單實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScript實現(xiàn)二叉樹定義、遍歷及查找的方法詳解
這篇文章主要介紹了JavaScript實現(xiàn)二叉樹定義、遍歷及查找的方法,結合實例形式較為詳細的分析了二叉樹的相關概念及javascript構建二叉樹、遍歷、查找二叉樹的常用操作技巧,需要的朋友可以參考下2017-12-12
JavaScript正則表達式替換字符串中圖片地址(img src)的方法
這篇文章主要介紹了JavaScript正則表達式替換字符串中圖片地址(img src)的方法,結合實例形式分析了JS正則替換的常用技巧與注意事項,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了HTML5 Canvas實現(xiàn)圓形時鐘簡易教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細介紹了javascript函數(shù)中的3個高級技巧,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明，每種編程語言必不可少的語法，在javascript中，變量的聲明相對其他語言來說，算是比較簡單的。更多相關的具體內容需要的小伙伴可以參考一下2022-06-06
使用typeof方法，typeof 返回的是字符串,其中就有一個是undefined，下面是示例代碼，大家可以看看2014-09-09
在原生不支持的舊環(huán)境中添加兼容的Object.keys實現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了javascript?Redux的狀態(tài)管理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
對比分析Django的Q查詢及AngularJS的Datatables分頁插件
通過本文給大家對比分析了Django的Q查詢及AngularJS的Datatables分頁插件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02