이 기사에서는 JS+CSS가 새로 고침없이 컨텐츠를 표시 할 수있는 게시판 기능에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> JS+CSS는 새로 고침없이 컨텐츠를 표시 할 수있는 게시판 기능을 에뮬레이션합니다 </title>
<스타일 유형 = "텍스트/CSS">
* {패딩 : 0; 여백 : 0; }
Li {List 스타일 : 없음; }
#parent {너비 : 600px; 여백 : 0 Auto; }
H4 {line-height : 40px; 마진 바닥 : 10px; 국경 바닥 : 1px 고체 #333; 색상 :#FF3300}
p {너비 : 100%; 배경 : #f1f1f1; 위치 : 상대; 마진 바닥 : 25px; }
#box {너비 : 580px; 패딩 : 25px 10px 0; 국경 : 1px Solid #ddd; 마진 바닥 : 10px; }
스팬 {위치 : 절대; 상단 : -20px; 오른쪽 : 0px; }
em {위치 : 상대; 상단 : -13px; }
#Text {너비 : 100%; 높이 : 90px; 오버플로 : 자동; }
#btn {너비 : 20%; 높이 : 50px; }
</스타일>
<script type = "text/javaScript">
i = 1;
함수 fnsubmit ()
{
var odiv = document.getElementById ( "box");
var oem = odiv.getElementsByTagName ( "em") [0];
var 그래픽 = document.getElementById ( "text");
var oli = odiv.getElementsByTagName ( "li");
var add_li = document.createElement ( "li");
var o_span = document.createElement ( "span");
if (etext.value == "")
{
Alert ( "메시지 내용을 작성하십시오!");
반품;
}
oem.style.display = "none";
o_span.style.position = "절대";
o_span.style.top = "-20px";
o_span.style.right = "20px";
o_span.style.background = "#cccccccc";
add_li.style.position = "상대";
add_li.index = i;
add_li.style.background = "#cccccccc";
add_li.style.marginbottom = "20px";
var str = document.creatextnode (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 ()
{
중--;
ODIV.REMOVECHILD (this);
if (m <0)
{
oem.style.display = "블록";
};
};
};
}
</스크립트>
</head>
<body>
<div id = "부모">
<H4> 메시지 내용 : </h4>
<div id = "box"> <em> 메시지 내용이 여기에 표시됩니다 ... </em> </div>
<입력 유형 = "text"id = "text"> <br />
<input id = "btn"type = "button"onclick = "fnsubmit ()"value = "메시지 게시" />
</div>
<br />
</body>
</html>
작동 효과는 아래 그림에 나와 있습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.