บทความนี้อธิบายฟังก์ชั่นบอร์ดข้อความที่ JS+CSS สามารถแสดงเนื้อหาได้โดยไม่ต้องรีเฟรช แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> JS+CSS จำลองฟังก์ชั่นบอร์ดข้อความที่สามารถแสดงเนื้อหาได้โดยไม่ต้องรีเฟรช </title>
<style type = "text/css">
* {padding: 0; มาร์จิ้น: 0; -
li {list-style: none; -
#parent {width: 600px; มาร์จิ้น: 0 อัตโนมัติ; -
H4 {Line-Height: 40px; มาร์จิ้น-ก้น: 10px; ขอบด้านล่าง: 1px Solid #333; สี:#ff3300}
P {ความกว้าง: 100%; ความเป็นมา: #F1F1F1; ตำแหน่ง: ญาติ; มาร์จิ้น-ก้น: 25px; -
#Box {WIDTH: 580PX; Padding: 25px 10px 0; ชายแดน: 1px Solid #DDD; มาร์จิ้น-ก้น: 10px; -
ช่วง {ตำแหน่ง: สัมบูรณ์; ด้านบน: -20px; ขวา: 0px; -
em {ตำแหน่ง: ญาติ; ด้านบน: -13px; -
#text {Width: 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 ("ข้อความ");
var oli = odiv.getElementsByTagname ("li");
var add_li = document.createelement ("li");
var o_span = document.createElement ("Span");
if (etext.value == "")
-
การแจ้งเตือน ("กรุณากรอกเนื้อหาข้อความ!");
กลับ;
-
oem.style.display = "ไม่มี";
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.createtextNode (i+","+etext.value);
var strspan = document.createTextNode ("ยืนยันเพื่อลบ"+i+","+etext.value+"เนื้อหา?");
add_li.appendchild (o_span);
o_span.style.display = "ไม่มี";
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 = "#ccccccc";
(this.childnodes (o_span)). style.display = "ไม่มี";
-
oli [j] .onclick = function ()
-
M--;
Odiv.removeChild (นี่);
ถ้า (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 = "ปุ่ม" onclick = "fnsubmit ()" value = "โพสต์ข้อความ" />
</div>
<br />
</body>
</html>
เอฟเฟกต์การดำเนินการแสดงในรูปด้านล่าง:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน