この記事では、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プログラミングに役立つことを願っています。