يصف هذا القسم تطبيق مربع الراديو/القائمة المنسدلة/إضافة الملفات وتوليف CSS و HTML و JavaScript. التفاصيل المحددة هي كما يلي:
صندوق الراديو:
الوظائف التي تم تنفيذها هي: (على غرار اختبار الشخصية المعتادة)
إخفاء جزء من الصفحة أولاً ، ثم عرضه بالنقر فوق مربع الراديو.
ثم أعط التعليقات عن طريق تحديد الخيارات - (كل خيار له نقاط مختلفة)
الرمز التجريبي:
<html> <Head> <title> DHTML Technology العرض التوضيحي --- استخدام الراديو </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <style type = "text/css" قائمة*/خلفية اللون:#80ff00 ؛/*لون الخلفية*/style: none ؛ // تلغي النقطة الافتراضية السابقة الهامش: 0px ؛ // severonal patch} ul li {/*اضبط لون الخط في li في ul*/color:#ff0000 ؛}. أغلق {display: none ؛}. showcontent (oradionode) {var odivnode = document.getElementById ("contentId") ؛ if (oradionode.value == "yes") {odivnode.style.display = "block" ؛ } آخر {odivnode.style.display = "none" ؛} // الطريقة الثانية: استخدام مع/*مع (odivnode.style) {if (oradionode.value == "نعم") {display = "block" ؛ document.getElementsByName ("NOL") ؛ var val = 0 ؛ // undefined إذا تم استخدامه كنوع منطقي خطأ // تنبيه (val) ؛ لـ (var x = 0 ؛ x <onolradionodes.length ؛ x ++) {// العثور على مربع الراديو المحدد إذا (onolradionodes [x] .checled) {val = parseint (onolradionodes [x] .value) ؛ تم اختياره ".fontcolor (" Red ") ؛ Return ؛} // يتم تعيين رسالة الخطأ إلى فارغة. document.getElementById ("erroinfo"). innerhtml = "" ؛ if (val> = 1 &&& val <= 3) {document.getElementById ("res_1"). className = "Open" ؛ document.getElementById ("res_2"). className = "close" ؛} else {document .getElementById ("res_1"). className = "close" ؛ document.getElementById ("res_2"). className = "Open" ؛}} </script> </head> <body> <viv> do تريد المشاركة في الاستبيان؟ <br/> <!-اسم مربع الراديو هو نفسه الحصري المتبادل-> <إدخال type = "radio" name = "wenjuan" value = "yes" onClick = "showcontent (this)"/> yes <input type = "radio" name = "wenjuan" value = "no" onclick = "showcontent (this) ID = "ContentId"> محتوى البحث: <br/> اسمك: <input type = "text" name = "name"/> <br/> رقم هاتفك: <input type = "text" name = "tel"/> </div> <hr/> <h2> مرحبًا بالمشاركة في اختبار الشخصية </h2> <h3> سؤال 1: </h3> </span> <ul id = "nolul"> <li> <input type = "radio" name = "nol" value = "1"/> grape </li> <li> <input type = "radio" name = "nol" value = "2"/li> </li> value = "4"/> mango </li> <li> <input type = "radio" name = "nol" value = "5"/> cherry </li></ul> <viv> <input type = "button" value = "view test results" onClick = "onclick =" showresult ()> <span id = "erroinfo" . . </viv> <div id = "res_2"> فوق 4 نقاط: شخصيتك منفتحة ، اقتراح. . . </viv> </viv> </body> </html>360 متصفح 8.1 نتائج التوضيح:
الصفحة في البداية:
حدد "نعم" في مربع الراديو:
نصائح عند عدم اختيار الفواكه:
نصائح عند اختيار الفواكه:
القائمة المنسدلة:
رمز تجريبي بسيط:
<html> <head> <title> عرض تقنية DHTML --- استخدام تحديد </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <style type = "text/css">. changeColor (OdicClrnode) {// احصل على كائن اللون ليتم تعيينه var colorval = odicclrnode.style.backgroundcolor ؛ // alert (colorval) ؛ // اضبط لون font document.getElementById ("text"). style.color = colorval ؛ OselectNode = document.getElementsByName ("SelectColor") [0] ؛ var coloptionnodes = OselectNode.options ؛ // خيارات الحصول على مجموعة من كائنات الخيار في كائن تحديد. // لـ (var x = 0 ؛ x <colloptionnodes.length ؛ x ++) {// ALERT (coloptionnodes [x] .innerhtml) ؛ //} // traverse it. // خيار محدد // ALERT (coloptionnodes [oselectnode.selectedIndex] .innerhtml) ؛ var colorvar = coloptionnodes [oselectnode.selectedIndex] .Value ؛ document.getElementById ("text"). color = colorvar ؛ document.getElementsByName ("selectColor") [1] ؛ var coloptionnodes = oselectnode.options ؛ var colorvar = coloptionnodes [oselectnode.selectedIndex] .value ؛ document.getElementById ("text"). style.color = colorvar ؛ style = "background-color: black" onClick = "ChangeColor (this)"> </viv> <div id = "clr1" style = "background-color: red" onclick = "changeColor (this)"> </div> <div id = OnClick = "ChangeColor (this)"> </viv> <div id = "clr4" style = "background-color:#c0c0c0 ؛" onClick = "ChangeColor (this)"> </viv> <div id = "clr5" style = "background-color:#00ffff" onClick = "ChangeColor (this)"> </viv> <div id = النص <br/> </viv> <hr/> <!-// في هذا المثال ، ليس من المناسب تسجيل حدث onclick للاختيار ، لأنه <select name = "selectColor" onClick = "ChangeColor2 ()">-> <br/> value = "red"> red </portive> <option value = "green"> green </points> <option value = "blue"> blue </puint> <orte realued = "#c0c0c0"> silver </sophan> </select> <hr/> <select name = "selectColor" onChange = "changeColor3 () style = "background-color: black">-حدد اللون-</option> <orpue value = "red" style = "background-color: red"> </potion> <orpue value = "green" </point> </rection> </body> </html>360 متصفح 8.1 نتائج التوضيح:
يتم شرح هذا المربع المنسد بالكلمات.
يستخدم المربع المنسدل أدناه اللون مباشرة للإشارة إلى سبب تعيين النص
القائمة المنسدلة المعززة - قائمة الرابط الثانوي - عرض رمز:
تتمثل الوظيفة التي تم تنفيذها في تحديد عرض القائمة الثانية بناءً على خيارات القائمة الأولى.
<html> <head> <title> DHTML Technology العرض التوضيحي ---- استخدام قائمة SELECT-Secondary Link Menu </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <script type = "text/javascrip المجموعة "، وستأتي البيانات من الخلفية Var Collprovices = {" Beijing ": ['Haidian District' ، 'Dongcheng District' ، 'Xicheng District' ، 'Chaoyang District'] ،" Zhejiang ": ['Hangzhou' ، 'Ningbo' ، 'Jinhua' ، 'Wenzhou'] ['Yiyang' ، 'Changsha' ، 'Zhuzhou' ، 'Xiangtan'] ، "Jiangxi": ['nanchang' ، 'Jiujiang' ، 'pingxiang' ، 'shangrao'] // ALERT (collprovices ["beijing"] [2]) ؛ // xicheng district // الحصول على مجموعة المدينة من المرؤوسين إلى المقاطعة المحددة من قبل المستخدم var oselnode = document.getElementByID ("selid") Arcyvar ArrCities = collprovices [provicename] ؛ // احصل على صفيف المدينة للمقاطعة المحددة Var Osubselnode = document.getElementById ("subselid") ؛ x = 1 ؛ x <subselnode.options.length ؛) {// لاحظ أنه بعد حذف الصفيف ، يتم تحديث الطول تلقائيًا ، لذلك لا تستخدم "x ++" لتصحيح مرة أخرى // osubselnode.removechild (Osubselnode.options [x] //} //} Osubselnode [x] و osubselnode.options [x] // method 2- removechild من back // for (var x = osubselnode.length-1 ؛ x> = 1 ؛ x-) osubselnode.length.length = 1 ؛ // قم بتعيين الطول على 1 ، ثم يتم حذف الخيارات المتبقية تلقائيًا // إضافة كل عنصر في مجموعة المدينة إلى القائمة المنسدلة "subselid" لـ (var x = 0 ؛ x <arrcities.length ؛ x ++) {var optionNode = document.createElement ("Option") ؛ OptionNode.innerhtml = morcities [x] ؛ // OptionNode.value = ... [x] ؛ // تطوير رسمي ، يجب أن تكون هناك قيمة تتوافق مع هذا الخيار الذي سيتم تعيينه ، لذلك نحذفه هنا. osubselnode.appendChild (OptionNode) ؛}} </script> </head> <body> <select id = "selid" onChange = "selectCity ()"> <tort value = "zhejiang"> zhejiang </portive> <orpue value = "jiangxi"> jiangxi </portive> </select> <select id = "subselid"> <tort360 متصفح 8.1 نتائج التوضيح:
إضافة وحذف المرفقات لمكونات الملفات
لا توجد وظيفة للاتصال بالخلفية ، فقط تعلم التكنولوجيا في HTML
الرمز التجريبي:
<html> <Head> <title> DHTML CONTRATION-File-ADD وحذف المرفقات </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <style type = "text/css"/*a: link the hyperlink يتم نقره. ج: حالة زيارة بعد الوصول إليها. ج: تحوم المؤشر ينتقل إلى الحالة على الارتباط التشعبي (لم يتم النقر عليه). ج: نشط الحالة عند النقر على الارتباط التشعبي. استخدم الترتيب: LVHA*/الجدول أ: الرابط ، الجدول أ: زيارة ، IMG {text-decoration: none ؛/* استرداد أو تعيين زخرفة النص في الكائن. تكرار النص: لا شيء: القيمة الافتراضية. لا توجد وميض زخرفي: Blink Underline: Underline-though: من خلال الخط الإضافي: Overline*/color:#0000ff ؛} الجدول A: Hover {color:#ff0000 ؛} </style> <script type = "text/javaScript"> function addfile () {var ofiletablenode = document.getelementoidiid ("fileTable") OFILETABLENODE.INSERTROW () ؛ // inserTrow قم بإنشاء صف جديد (TR) في الجدول وإضافة مجموعة الصفوف. var otdnodefile = otrnode.insertcell () ؛ // insertcell قم بإنشاء خلية جديدة في صف الجدول (TR) وأضف الخلية إلى مجموعة الخلايا. otdnodefile.innerhtml = "<input type = 'file'/>" ؛ var otdnodedel = otrnode.insertcell () ؛ // استخدم النص // otdnodedel.innerhtml = " الصورة --- ابحث عن صورة بنفسك وتسميتها a.jpg-أو تغيير الكود otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'delete anfactment' onclick = 'deletefile (this)'/>" ؛ var otrnodedel = oanode.parentnode.parentnode ؛ // trotrnodedel.parentnode.removechild (otrnodedel) ؛} </script> </head> <body> <table id = "fileTable"> <tr> <th> المرفق </a> </th> </tr> <! --- اضغط على الزر لإضافة مرفقات ، لذلك لا تستخدم html ، اكتب في javaScript <tr> <td> <type type = "file"/> </td> <td> <a href = "javaScript: void (0)" </table> </body> </html>360 متصفح 8.1 نتائج التوضيح:
حذف السطر الثاني TR:
ما سبق هو المعرفة ذات الصلة حول إضافة تأثيرات الملفات بناءً على javaScript استنادًا إلى JavaScript لك. آمل أن يكون ذلك مفيدًا لك. إذا كنت تريد معرفة المزيد ، فيرجى الانتباه إلى wulin.com!