ส่วนนี้อธิบายการใช้งานของกล่องวิทยุ/เมนูแบบเลื่อนลง/เพิ่มไฟล์การสังเคราะห์ CSS, HTML และ JavaScript รายละเอียดเฉพาะมีดังนี้:
กล่องวิทยุ:
ฟังก์ชั่นที่นำมาใช้คือ: (คล้ายกับการทดสอบบุคลิกภาพตามปกติ)
ซ่อนส่วนหนึ่งของหน้าก่อนจากนั้นแสดงโดยคลิกที่กล่องวิทยุ
จากนั้นให้ความคิดเห็นโดยเลือกตัวเลือก - (แต่ละตัวเลือกมีคะแนนแตกต่างกัน)
รหัสสาธิต:
<html> <head> <title> การสาธิตเทคโนโลยี DHTML --- การใช้วิทยุ </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">#contentId รายการ*/พื้นหลังสี:#80ff00;/*สีพื้นหลัง*/รายการสไตล์: ไม่มี; // dot เริ่มต้นก่อนหน้านี้ยกเลิกระยะขอบ: 0px; // patch ภายนอก} ul li {/*ตั้งค่าตัวอักษรของ li ใน ul*/color:#ff0000;}. ปิด {แสดง: ไม่มี;} showContent (oradionode) {var odivNode = document.getElementById ("contentId"); ถ้า (oradionode.value == "ใช่") {odivnode.style.display = "block"; } else {odivnode.style.display = "ไม่มี";} // วิธีที่สอง: ใช้กับ/*ด้วย (odivnode.style) {ถ้า (oradionode.value == "ใช่") {display = "block"; document.getElementsByName ("nol"); var val = 0; // undefined หากใช้เป็นประเภทบูลีนเป็นเท็จ // การแจ้งเตือน (val); สำหรับ (var x = 0; x <onolradionodes.length; x ++) {// การค้นหากล่องวิทยุที่เลือกถ้า (onolradionodes [x]. ตรวจสอบ) {val = parseint (onolradionodes [x] .value); เลือก ".FontColor (" สีแดง "); return;} // ข้อความแสดงข้อผิดพลาดถูกกำหนดให้ว่างเปล่า document.getElementById ("erroinfo"). innerhtml = "" ถ้า (val> = 1 && val <= 3) {document.getElementById ("res_1"). className = "open"; document.getElementById ("res_2"). classname = "close"; .getElementById ("res_1"). classname = "close"; document.getElementById ("res_2"). className = "เปิด";}} </script> </head> <body> <div> ทำ คุณต้องการมีส่วนร่วมในแบบสอบถามหรือไม่? <br/> <!-ชื่อกล่องวิทยุวิทยุเหมือนกับ Exclusive ซึ่งกันและกัน-> <อินพุต type = "Radio" name = "Wenjuan" value = "ใช่" onclick = "showcontent (นี้)"/> ใช่ <อินพุต type = "Radio" name = "Wenjuan" value = "no" onclick = " id = "contentId"> เนื้อหาการค้นหา: <br/> ชื่อของคุณ: <อินพุต type = "text" name = "name"/> <br/> หมายเลขโทรศัพท์ของคุณ: <อินพุตประเภท = "text" name = "tel"/> </div> <hr/> <h2> </span> <ul id = "nolul"> <li> <input type = "Radio" name = "nol" value = "1"/> องุ่น </li> <li> <อินพุต type = "Radio" name = "nol" value = "2"/> watermelon </li> <li> value = "4"/> mango </li> <li> <อินพุต type = "วิทยุ" name = "nol" value = "5"/> เชอร์รี่ </li> </ul> <div> <อินพุตประเภท = "ปุ่ม" value = "ดูผลการทดสอบ" - - </div> <div id = "res_2"> เหนือ 4 คะแนน: บุคลิกของคุณถูกเปิดเผยคำแนะนำ - - </div> </div> </body> </html>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
หน้าเริ่มต้น:
เลือก "ใช่" ในกล่องวิทยุ:
เคล็ดลับเมื่อไม่เลือกผลไม้:
เคล็ดลับเมื่อเลือกผลไม้:
รายการดรอปดาวน์:
รหัสสาธิตอย่างง่าย:
<html> <head> <title> การสาธิตเทคโนโลยี DHTML --- การใช้ Select </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <สไตล์ type = "text/css">. clrclass {ความสูง: 50px; width: 50px; float: ซ้าย;/*float*/margin-right: 30px; margin-bottom: 20px;/*patch ด้านล่าง*/}#text {clear: left;/*float odicClrNode) {// รับวัตถุสีที่จะตั้งค่า var colorval = odicclrnode.style.backgroundcolor; // alert (colorval); // ตั้งค่าสีของ font document.getElementById ("text"). style.color = colorval; document.getElementsByName ("SelectColor") [0]; var coloptionNodes = oselectNode.options; // ตัวเลือกรับคอลเลกชันของวัตถุตัวเลือกในวัตถุที่เลือก // สำหรับ (var x = 0; x <colloptionNodes.length; x ++) {// alert (coloptionNodes [x] .innerhtml); //} // traverse // ตัวเลือกที่เลือก // การแจ้งเตือน (coloptionNodes [oselectNode.SelectedIndex] .innerhtml); var colorvar = coloptionNodes [oselectNode.SelectedIndex] .value; document.getElementId document.getElementsByName ("SelectColor") [1]; var coloptionNodes = oselectNode.options; var colorvar = coloptionNodes [oselectNode.SelectedIndex]. value; document.getElementId ("ข้อความ") style = "พื้นหลังสี: สีดำ" onclick = "changecolor (this)"> </div> <div id = "clr1" style = "พื้นหลังสี: สีแดง" onclick = "changecolor (this)"> </div> <div id = "clr2" style = style = "พื้นหลังสี: blue" onclick = "changecolor (this)"> </div> <div id = "clr4" style = "พื้นหลังสี:#c0c0c0;" onclick = "changecolor (this)"> </div> <div id = "clr5" style = "พื้นหลังสี:#00ffff" onclick = "changecolor (นี้)"> </div> <div id = "ข้อความ"> <img src = "/> <br/> ข้อความ <br/> </div> <hr/> <!-// ในตัวอย่างนี้มันไม่เหมาะสมที่จะลงทะเบียนเหตุการณ์ onclick สำหรับการเลือกเพราะ <select name = "selectColor" onClick = "changecolor2 ()">-> <br/> <select = "selectColor" onChange = "ChangColor2 () value = "red"> red </opovie> <opovie value = "Green"> Green </optup> <opotion value = "blue"> blue </optup> <ตัวเลือก value = "#c0c0c0"> เงิน </optup> </select> <hr/> <select name = "selectcolor" onchange = "changecolor3 () style = "พื้นหลังสี: สีดำ">-เลือกสี-</optup> <ตัวเลือกค่า = "สีแดง" style = "พื้นหลังสี: สีแดง"> </ตัวเลือก> <ตัวเลือกค่า = "สีเขียว" style = "พื้นหลังสี: สีเขียว"> </optup> <ตัวเลือกค่า = "สีน้ำเงิน" </petion> </select> </body> </html>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
กล่องดรอปดาวน์นี้อธิบายเป็นคำพูด
กล่องดรอปดาวน์ด้านล่างใช้สีโดยตรงเพื่อระบุว่าทำไมข้อความจึงถูกตั้งค่า
รายการดรอปดาวน์ที่แข็งแกร่ง - เมนูลิงค์รอง - การสาธิตรหัส:
ฟังก์ชั่นที่ใช้งานคือการกำหนดการแสดงผลของเมนูที่สองตามตัวเลือกของเมนูแรก
<Html> <head> <title> การสาธิตเทคโนโลยี DHTML ---- การใช้เลือก-เมนูลิงก์ที่สอง </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" cross-croction คอลเลกชัน "และข้อมูลจะมาจากพื้นหลัง var collprovices = {" Beijing ": ['Haidian District', 'Dongcheng District', 'District Xicheng', 'Chaoyang District']," Zhejiang ": [Hangzhou ',' Ningbo ',' Jinhua ',' Wenhou ' ['Yiyang', 'Changsha', 'Zhuzhou', 'Xiangtan'], 'Jiangxi': ['Nanchang', 'Jiujiang', 'pingxiang', 'Shangrao']}; // Alert (collprovices ["Beijing"] [2]); // Xicheng District // รับชุดเมืองของผู้ใต้บังคับบัญชาไปยังจังหวัดที่เลือกโดยผู้ใช้ var var oselnode = document.getElementById ("selid"); var index = oselnode.selectedEx; // รายการใดที่เลือก รายการ valuevar arrcities = collProvices [provicename]; // รับอาร์เรย์ของเมืองของจังหวัดที่เลือก var osubselnode = document.getElementById ("subselid"); // รับรายการดรอปดาวน์รายการที่สอง // x = 1; x <osubselnode.options.length;) {// โปรดทราบว่าหลังจากที่อาร์เรย์ถูกลบความยาวจะถูกอัปเดตโดยอัตโนมัติดังนั้นอย่าใช้ "x ++" เพื่อแก้ไขในครั้งสุดท้าย // osubselnode.removechild (osubselnode.options [x]); osubselnode [x] และ osubselnode.options [x] // เมธอด 2-removechild จากด้านหลัง // สำหรับ (var x = osubselnode.length-1; x> = 1; x-) {// osubselnode.removechild (osubselnode [x]) osubselnode.length.length = 1; // ตั้งค่าความยาวเป็น 1 จากนั้นตัวเลือกที่เหลือจะถูกลบโดยอัตโนมัติ // เพิ่มแต่ละองค์ประกอบในคอลเลกชันของเมืองลงในเมนูแบบเลื่อนลง "subselid" สำหรับ (var x = 0; x <arrcities.length; x ++) {var opotionNode = document.createElement ("ตัวเลือก"); OptionNode.innerhtml = arrcities [x]; // optivenode.value = ... [x]; // การพัฒนาอย่างเป็นทางการควรมีค่าที่สอดคล้องกับตัวเลือกนี้ที่จะกำหนดดังนั้นเราจึงละเว้นที่นี่ OsubselNode.AppendChild (OptionNode);}} </script> </head> <body> <select id = "selid" onchange = "selectcity ()"> <pontion>-เลือกจังหวัด-</ตัวเลือก> <ตัวเลือกค่า = "Beijing"> value = "Zhejiang"> Zhejiang </opovie> <ตัวเลือกค่า = "Jiangxi"> Jiangxi </ตัวเลือก> </select> <select id = "subselid"> <petion>-เลือกเมือง-</ตัวเลือก> </select>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
เพิ่มและลบไฟล์แนบสำหรับส่วนประกอบไฟล์
ไม่มีฟังก์ชั่นที่จะติดต่อพื้นหลังเพียงเรียนรู้เทคโนโลยีใน HTML
รหัสสาธิต:
<html> <head> <title> dhtml เทคโนโลยีไฟล์-ADD และลบสิ่งที่แนบมา </title> <meta http-equiv = "เนื้อหาประเภท" เนื้อหา = "ข้อความ/html; charset = utf-8"/> <style type = "ข้อความ/css">/* ตอบ: สถานะเข้าชมหลังจากเข้าถึง ตอบ: โฮเวอร์เคอร์เซอร์จะย้ายไปยังสถานะบนไฮเปอร์ลิงก์ (ไม่คลิก) ตอบ: ใช้งานสถานะเมื่อคลิกที่ไฮเปอร์ลิงก์ ใช้คำสั่งซื้อ: lvha*/ตาราง A: ลิงก์, ตาราง A: เยี่ยมชม, img {การกำหนดข้อความ: ไม่มี;/* ดึงหรือตั้งค่าการตกแต่งข้อความในวัตถุ การกำหนดข้อความ: ไม่มี: ค่าเริ่มต้น ไม่มีการตกแต่งกะพริบ: Blink ขีดเส้นใต้: ขีดเส้นใต้: ผ่านบรรทัด Overline: sownline*/color:#0000ff;} ตาราง A: Hover {color:#ff0000;} </style> <script type = "text/javascript"> ฟังก์ชั่น addment () OfileTablenode.insertrow (); // inserTrow สร้างแถวใหม่ (TR) ในตารางและเพิ่มคอลเลกชันแถว var otdNodeFile = otrNode.insertCell (); // insertcell สร้างเซลล์ใหม่ในแถวตาราง (TR) และเพิ่มเซลล์ลงในการรวบรวมเซลล์ otdNodeFile.innerhtml = "<อินพุตประเภท = 'ไฟล์'/>"; var otdnodedel = otrnode.insertCell (); // ใช้ข้อความ // otdnodedel.innerhtml = "<a href = 'javascript: void (0) รูปภาพ --- ค้นหาภาพด้วยตัวคุณเองและตั้งชื่อมัน a.jpg-or เปลี่ยนรหัส otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'ลบสิ่งที่แนบมา' onClick = 'deleteFile (นี่)'/>"; var otrnodedel = oanode.parentNode.parentNode; // trotrnodedel.parentNode.removeChild (otrnodedel);} </script> </head> <body> <table id = "filetable"> <tr> สิ่งที่แนบมา </a> </th> </tr> <! --- แตะที่ปุ่มเพื่อเพิ่มสิ่งที่แนบมาดังนั้นอย่าใช้ html เขียนใน javascript <tr> <td> <อินพุต type = "ไฟล์"/> </td> <td> <a href = "javaScript: void (0) </table> </body> </html>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
ลบบรรทัดที่สอง TR:
ข้างต้นคือความรู้ที่เกี่ยวข้องเกี่ยวกับการเพิ่มเอฟเฟกต์ไฟล์ตาม JavaScript ตาม JavaScript ให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดใส่ใจกับ wulin.com!