<腳本類型=“text/javascript”>
window.onload = function(){
var btn = document.querySelector('input');
var text = document.querySelector('textarea');
var list = document.querySelector('#list');
var color = ["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 = color[nub%colors.length];
/* 判斷一個標籤已經被加,就讓一個標籤顯示出來,否則就添加*/
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 = "無";
} ;
list.insertBefore(li,list.children[0]);
text.value = "";
nub++;
};
};
< ;/textarea>
以上是JS案例聯繫之留言板的詳細內容。更多資訊請關注PHP中文網其他相關文章!
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:
canvas的實例--時鐘動畫
下一篇:
canvas的實例--時鐘動畫
相關文章
看更多
AlloyTouch全螢幕滾動插件 30秒搞定順滑H5頁
HTML5實戰與剖析之觸摸事件(touchstart、touchmove與touchend)
HTML5 canvas 9繪製圖片實例詳解
正規表示式與HTML5新元素
NodeJS與HTML5結合實作拖曳多個檔案上傳到伺服器的實作方法