В этой статье описывается функция доски сообщений, что JS+CSS может отображать контент без обновления. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-trantional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<Title> JS+CSS эмулирует функцию платы сообщений, которая может отображать контент без обновления </title>
<стиль типа = "text/css">
* {Padding: 0; поля: 0; }
li {Список-стиль: нет; }
#parent {ширина: 600px; Поле: 0 Авто; }
h4 {line-height: 40px; маржинальный бат: 10px; Пограничный подъем: 1PX SOLID #333; Цвет:#ff3300}
p {ширина: 100%; Фон: #f1f1f1; позиция: относительно; маржинальный бат: 25px; }
#box {ширина: 580px; Заполнение: 25px 10px 0; Граница: 1PX SOLID #DDD; маржинальный бат: 10px; }
span {позиция: абсолют; Верх: -20px; Справа: 0px; }
em {позиция: относительно; Верх: -13px; }
#Text {ширина: 100%; Высота: 90px; переполнение: авто; }
#btn {ширина: 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 == "")
{
Alert («Пожалуйста, заполните содержимое сообщения!»);
возвращаться;
}
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 = "относительный";
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+"Содержание?");
add_li.appendchild (o_span);
o_span.style.display = "none";
o_span.appendchild (strspan);
add_li.appendchild (str);
ODIV.AppendChild (add_li);
i ++;
для (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 (это);
if (m <0)
{
oem.style.display = "block";
};
};
};
}
</script>
</head>
<тело>
<div id = "parent">
<h4> Содержание сообщения: </h4>
<div id = "box"> <em> Содержание сообщения будет отображаться здесь ... </em> </div>
<input type = "text" id = "text"> <br />
<input id = "btn" type = "кнопка" onclick = "fnsubmit ()" value = "post of Message" />
</div>
<br />
</body>
</html>
Эффект работы показан на рисунке ниже:
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.