JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板實(shí)例
更新時(shí)間：2015年03月03日 09:32:38 作者：代碼家園
這篇文章主要介紹了JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板,涉及javascript操作dom元素、鼠標(biāo)事件及css樣式的技巧,需要的朋友可以參考下
本文實(shí)例講述了JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板功能。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板功能</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
#parent { width: 600px; margin: 0 auto; }
h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; color:#FF3300 }
p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }
#box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }
span { position: absolute; top: -20px; right: 0px; }
em { position: relative; top: -13px; }
#text { width: 100%; height: 90px; overflow: auto; }
#btn { width: 20%; height: 50px; }
</style>
<script type="text/javascript">
i=1;
function fnsubmit()
{
var odiv=document.getElementById("box");
var oem=odiv.getElementsByTagName("em")[0];
var otext=document.getElementById("text");
var oli=odiv.getElementsByTagName("li");
var add_li=document.createElement("li");
var o_span=document.createElement("span");
if(otext.value=="")
{
alert("請(qǐng)?zhí)顚?xiě)留言內(nèi)容！");
return;
}
oem.style.display="none";
o_span.style.position="absolute";
o_span.style.top="-20px";
o_span.style.right="20px";
o_span.style.background="#cccccc";
add_li.style.position="relative";
add_li.index=i;
add_li.style.background="#cccccc";
add_li.style.marginBottom="20px";
var str=document.createTextNode(i+"、"+otext.value);
var strspan=document.createTextNode("確定刪除"+i+"、"+otext.value+"內(nèi)容？");
add_li.appendChild(o_span);
o_span.style.display="none";
o_span.appendChild(strspan);
add_li.appendChild(str);
odiv.appendChild(add_li);
i++;
for(j=0;j<oli.length;j++)
{
var m=j;
oli[j].onmouseover=function()
{
this.style.background="#ffff00";
(this.childNodes(o_span)).style.display="block";
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板功能</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
#parent { width: 600px; margin: 0 auto; }
h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; color:#FF3300 }
p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }
#box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }
span { position: absolute; top: -20px; right: 0px; }
em { position: relative; top: -13px; }
#text { width: 100%; height: 90px; overflow: auto; }
#btn { width: 20%; height: 50px; }
</style>
<script type="text/javascript">
i=1;
function fnsubmit()
{
var odiv=document.getElementById("box");
var oem=odiv.getElementsByTagName("em")[0];
var otext=document.getElementById("text");
var oli=odiv.getElementsByTagName("li");
var add_li=document.createElement("li");
var o_span=document.createElement("span");
if(otext.value=="")
{
alert("請(qǐng)?zhí)顚?xiě)留言內(nèi)容！");
return;
}
oem.style.display="none";
o_span.style.position="absolute";
o_span.style.top="-20px";
o_span.style.right="20px";
o_span.style.background="#cccccc";
add_li.style.position="relative";
add_li.index=i;
add_li.style.background="#cccccc";
add_li.style.marginBottom="20px";
var str=document.createTextNode(i+"、"+otext.value);
var strspan=document.createTextNode("確定刪除"+i+"、"+otext.value+"內(nèi)容？");
add_li.appendChild(o_span);
o_span.style.display="none";
o_span.appendChild(strspan);
add_li.appendChild(str);
odiv.appendChild(add_li);
i++;
for(j=0;j<oli.length;j++)
{
var m=j;
oli[j].onmouseover=function()
{
this.style.background="#ffff00";
(this.childNodes(o_span)).style.display="block";
};
oli[j].onmouseout=function()
{
this.style.background="#cccccc";
(this.childNodes(o_span)).style.display="none";
};
oli[j].onclick=function()
{
m--;
odiv.removeChild(this);
if(m<0)
{
oem.style.display="block";
};
};
};
}
</script>
</head>
<body>
<div id="parent">
<h4>留言內(nèi)容：</h4>
<div id="box"><em>這里會(huì)顯示留言內(nèi)容……</em></div>
<input type="text" id="text"><br />
<input id="btn" type="button" onclick="fnsubmit()" value="發(fā)表留言" />
</div>
<br />
</body>
</html>
運(yùn)行效果如下圖所示：
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)留言板功能
- js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法
- jsp留言板源代碼三: 給jsp初學(xué)者.
- JS實(shí)現(xiàn)留言板功能[樓層效果展示]
- js 實(shí)現(xiàn)的可折疊留言板(附源碼下載)
- JS實(shí)現(xiàn)簡(jiǎn)易留言板（節(jié)點(diǎn)操作）
- jsp留言板源代碼二: 給jsp初學(xué)者.
- 本人ajax留言板的源程序 不錯(cuò)的應(yīng)用js
- 用ReactJS和Python的Flask框架編寫(xiě)留言板的代碼示例
- JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)下拉列表框菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
使用JavaScript獲取URL參數(shù)的方法總結(jié)
在?JavaScript?中,獲取?URL?參數(shù)是非常常見(jiàn)的操作,這篇文章為大家整理了四個(gè)JavaScript常見(jiàn)的獲取URL參數(shù)方法,希望對(duì)大家有所幫助2024-12-12
setTimeout的參數(shù)傳遞問(wèn)題想必大家有所糾結(jié)，window.settimeout()方法要調(diào)用帶參數(shù)的函數(shù)有兩種方法，下面為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
layui實(shí)現(xiàn)tab的添加拒絕重復(fù)的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)tab的添加拒絕重復(fù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)資料,需要的朋友可以參考下2015-12-12
JS實(shí)現(xiàn)訪問(wèn)DOM對(duì)象指定節(jié)點(diǎn)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)訪問(wèn)DOM對(duì)象指定節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)DOM元素節(jié)點(diǎn)屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼
大家都知道Swiper(Swiper master)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁(yè)觸摸內(nèi)容滑動(dòng)js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
這篇文章主要介紹了Typescript中函數(shù)類型,主要包括常見(jiàn)寫(xiě)法、可選參數(shù)，默認(rèn)參數(shù)及剩余參數(shù)，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
關(guān)于javascript的一些知識(shí)以及循環(huán)詳解
下面小編就為大家?guī)?lái)一篇關(guān)于javascript的一些知識(shí)以及循環(huán)詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要介紹了JS數(shù)組reduce()方法原理及使用技巧解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07