JS CSS は、refreshing_javascript スキルなしでコンテンツを表示できるメッセージ ボードの例をシミュレートします

この記事の例では、コンテンツを更新せずに表示できる JS CSS シミュレーション掲示板機能について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
i=1;
関数 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("スパン");
if(otext.value=="")
{
alert("メッセージ内容を入力してください!");
戻る;
}
oem.style.display="none";
o_span.style.position="絶対";
o_span.style.top="-20px";
o_span.style.right="20px";
o_span.style.background="#cccccc";
add_li.style.position="相対";
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 " コンテンツを削除してもよろしいですか?");
add_li.appendChild(o_span);
o_span.style.display="none";
o_span.appendChild(strspan);
add_li.appendChild(str);
odiv.appendChild(add_li);
私;
for(j=0;j {
var m=j;
oli[j].onmouseover=function()
{
this.style.background="#ffff00";
(this.childNodes(o_span)).style.display="ブロック";

};
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 {
oem.style.display="ブロック";
};
};
};
}

メッセージ内容:

メッセージの内容がここに表示されます...

操作効果は以下の通りです:

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。