تصف هذه المقالة وظيفة لوحة الرسائل التي يمكن لـ JS+CSS عرض المحتوى دون تحديث. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <! doctype html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> JS+CSS يحاكي وظيفة لوحة الرسائل التي يمكنها عرض المحتوى دون تحديث </title>
<type type = "text/css">
* {padding: 0 ؛ الهامش: 0 ؛ }
li {على غرار القائمة: لا شيء ؛ }
#parent {width: 600px ؛ الهامش: 0 Auto ؛ }
H4 {Line-Height: 40px ؛ هامش القاع: 10 بكسل ؛ Border-Bottom: 1px Solid #333 ؛ اللون:#ff3300}
P {العرض: 100 ٪ ؛ الخلفية: #f1f1f1 ؛ الموقف: قريب هامش القاع: 25 بكسل ؛ }
#box {width: 580px ؛ Padding: 25px 10px 0 ؛ الحدود: 1 بكسل Solid #DDD ؛ هامش القاع: 10 بكسل ؛ }
span {position: absolute ؛ أعلى: -20px ؛ اليمين: 0px ؛ }
em {الموضع: النسبي ؛ أعلى: -13px ؛ }
#Text {العرض: 100 ٪ ؛ الارتفاع: 90 بكسل ؛ الفائض: السيارات ؛ }
#BTN {العرض: 20 ٪ ؛ الارتفاع: 50 بكسل ؛ }
</style>
<script type = "text/javaScript">
أنا = 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") ؛
إذا (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 = "النسبية" ؛
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 ++ ؛
لـ (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 (هذا) ؛
إذا (M <0)
{
oem.style.display = "block" ؛
} ؛
} ؛
} ؛
}
</script>
</head>
<body>
<div id = "parent">
<h4> محتوى الرسالة: </h4>
<div id = "box"> <em> سيتم عرض محتوى الرسالة هنا ... </em> </viv>
<input type = "text" id = "text"> <br />
<input id = "btn" type = "button" onClick = "fnsubmit ()" value = "post a message" />
</div>
<br />
</body>
</html>
يظهر تأثير التشغيل في الشكل أدناه:
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.