JS實(shí)現(xiàn)留言板功能
更新時(shí)間：2017年06月17日 09:14:16 作者：catEatBird
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
每天一個(gè)JS 小demo之留言板。主要知識(shí)點(diǎn)：DOM方法的理解和運(yùn)用
<!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("打點(diǎn)字吧");
return false;
}
var li = document.createElement("li");
li.innerHTML = text.value;
// li.className = colors[nub%colors.length];
/* 判斷a標(biāo)簽已經(jīng)被添加，就讓a標(biāo)簽顯示出來(lái)，否則就添加 */
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
分享一個(gè)原生的JavaScript拖動(dòng)方法
本文給大家分享的是基于JavaScript的setCapture方法實(shí)現(xiàn)的拖動(dòng)效果，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下2016-09-09![JS鮮為人知的問(wèn)題之[] == ![]結(jié)果為true、而{} == !{}卻為false](http://img.jbzj.com/images/xgimg/bcimg1.png)
JS鮮為人知的問(wèn)題之[] == ![]結(jié)果為true、而{} == !{}卻為false
這篇文章主要給大家介紹了關(guān)于JS鮮為人知的問(wèn)題之[] == ![]結(jié)果為true、而{} == !{}卻為false的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用,下面分四種情況，詳細(xì)討論this的用法，感興趣的朋友可以了解下2013-09-09
javascript cookies 設(shè)置、讀取、刪除實(shí)例代碼
javascript cookies 存、取、刪除實(shí)例，也是不錯(cuò)的文章，跟我們整理的有些補(bǔ)充。2010-04-04
用move.js庫(kù)實(shí)現(xiàn)百葉窗特效
本文主要介紹了用move.js庫(kù)實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
基于Unit PNG Fix.js有時(shí)候在ie6下不正常的解決辦法
本篇文章是對(duì)Unit PNG Fix.js有時(shí)候在ie6下不正常的解決辦法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于ES6中promise詳解及用法的相關(guān)資料,需要的朋友可以參考下2022-11-11
JS實(shí)現(xiàn)點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能
在一些注冊(cè)類的網(wǎng)站，經(jīng)常遇到這樣的需求，點(diǎn)擊發(fā)送驗(yàn)證碼，xx秒后重新發(fā)送，這樣的功能怎么實(shí)現(xiàn)呢，接下來(lái)通過(guò)本文給大家分享js點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能，需要的朋友參考下吧2019-07-07
在實(shí)際工作中，我們應(yīng)該經(jīng)常會(huì)看到一些功能上沒(méi)有問(wèn)題，但編碼風(fēng)格和規(guī)范卻十分糟糕的代碼，這往往會(huì)讓人不敢再往下閱讀，甚至?xí)绊戦喿x者一天的心情。本文的目的在于幫助那些沒(méi)有養(yǎng)成良好的編碼風(fēng)格，缺乏相應(yīng)編碼規(guī)范意識(shí)的JavaScript學(xué)習(xí)者們改善他們的編碼形象。2017-03-03
這篇文章主要介紹了使用微信SDK自定義分享的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07