この記事では、JS+CSSが更新せずにコンテンツを表示できるメッセージボード機能について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS+CSSは、更新なしでコンテンツを表示できるメッセージボード機能をエミュレートします</title>
<style type = "text/css">
* {パディング：0;マージン：0; }
li {list-style：none; }
#parent {width：600px;マージン：0 Auto; }
h4 {line-height：40px;マージンボトム：10px;国境圏：1pxソリッド＃333;色：＃ff3300}
p {幅：100％;背景：＃f1f1f1;位置：相対;マージンボトム：25px; }
#box {width：580px;パディング：25px 10px 0;境界線：1px solid #ddd;マージンボトム：10px; }
span {position：absolute;トップ：-20px;右：0px; }
em {position：relative;トップ：-13px; }
#text {width：100％;高さ：90px;オーバーフロー：自動; }
#btn {width：20％;高さ：50px; }
</style>
<script type = "text/javascript">
i = 1;
関数fnsubmit（）
{
var odiv = document.getElementById（ "box"）;
var oem = odiv.getelementsbytagname（ "em"）[0];
var Graphic = document.getElementById（ "Text"）;
var oli = odiv.getelementsbytagname（ "li"）;
var add_li = document.createelement（ "li"）;
var o_span = document.createelement（ "span"）;
if（etext.value == ""）
{
アラート（「メッセージコンテンツに記入してください！」）;
戻る;
}
oem.style.display = "none";
o_span.style.position = "absolute";
o_span.style.top = "-20px";
o_span.style.right = "20px";
o_span.style.background = "＃cccccccc";
add_li.style.position = "relative";
add_li.index = i;
add_li.style.background = "＃cccccccc";
add_li.style.marginbottom = "20px";
var str = document.createTextNode（i+"、"+etext.value）;
var strspan = document.createTextNode（ ""+i+"、"+etext.value+"content？"）を削除することを確認します。 "）;
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 = "＃cccccccc";
（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>メッセージコンテンツ：</h4>
<div id = "box"> <em>メッセージコンテンツはここから表示されます... </em> </div>
<input type = "text" id = "text"> <br />
<入力id = "btn" type = "button" onclick = "fnsubmit（）" value = "post a message" />
</div>
<br />
</body>
</html>
操作効果は、次の図に示されています。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。