В этом разделе описывается реализация радиосвязи/раскрывающегося меню/добавления файлов, синтез CSS, HTML и JavaScript. Конкретные детали следующие:
Радио коробка:
Реализованные функции: (аналогично обычному тесту личности)
Сначала скрыть часть страницы, а затем отобразить ее, нажав на радиочастоте.
Затем дайте комментарии, выбрав параметры - (каждый вариант имеет разные моменты)
Демо -код:
<html> <head> <tite> Dhtml Technology Demancation --- Использование радио </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">#contentid {display: none;/*show: default hidden*/} {/*{/*{/*{/*{/*{/*{/*{/*{/*{/*{/*{/*{/*{/*{/*. Список*/фоновый цвет:#80ff00;/*Цвет фона*/СПИСКИ СТИЛ: НЕТ; // Предыдущая точка по умолчанию запас отмены: 0px; // Внешний патч} ul li {/*Установите цвет разделки Li в Ul*/color:#ff0000;}. Close {display: none;}. Open {disloy: block;} </style> <script type = javcript/javcript} showContent (oradionode) {var OdivNode = document.getElementById ("contentId"); if (oradionode.value == "yes") {Odivnode.style.display = "block"; } else {odivnode.style.display = "none";} // Второй способ: использовать с/*с (odivnode.style) {if (oradionode.value == "yes") {display = "block";} els document.getelementsbyname ("nol"); var val = 0; // не определен, если используется в качестве логического типа, является false // alert (val); for (var x = 0; x <onolradionodes.length; x ++) {// Нахождение выбранного радиосвязи if (onolradionodes [x] .cecked) {val = parseint (onolradionodes [x]. Выбран ".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> <div> do Вы хотите принять участие в вопроснике? <br/> <!-Имя радио радиостанции совпадает с взаимоисключающим-> <input type = "radio" name = "wenjuan" value = "yes" onclick = "showcontent (this)"/> yes <input = "radio" name = "wenjuan". id = "contentId"> Содержание поиска: <br/> Ваше имя: <input type = "text" name = "name"/> <br/> Ваш номер телефона: <input type = "text" name = "tel"/> </div> <Hr/> <h2> Добро пожаловать, чтобы принять участие в личностном тесте </h2> <h3> Вопрос 1: </h3>> <prop>. Что ваш любимый фрукт? </span> <ul id = "nolul"> <li> <input type = "radio" name = "nol" value = "1"/> grape </li> <li> <input type = "radio" name = "nol" value = "2"/> wartmelon </li> <li> <input vame = name = "nol" = "3"/> Apple </li> <li> <lipe = "name =" nol "=" 3 "/> Apple </li> <li> <lipe =" nole = "value =" 3 "/> </li> <li> <lipe =" nole = "value =" 3 ". value = "4"/> mango </li> <li> <input type = "radio" name = "nol" value = "5"/> cherry </li> </ul> <div> <input type = "value =" view test "Onclick =" showresult () "> <span id =" erroinfo "> </span> <div Id". Полем Полем </div> <div id = "res_2"> выше 4 баллов: ваша личность экстравертирована, предложение. Полем Полем </div> </div> </body> </html>360 Браузер 8.1 Демонстрационные результаты:
Страница в начале:
Выберите «Да» в радиосвязи:
Советы, когда не выбирают фрукты:
Советы при выборе фруктов:
Раскрывающийся список:
Простой демо -код:
<html> <head> <tite> Dhtml технологическая демонстрация --- Использование Select </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <style type = "text/css">. clrclass {height: 50px; width: 50px; float: left;/*float*/margin-right: 30px; margin-bottom: 20px;/*Нижний внешний патч*/} #text {clear: left;/*float не может плавать слева*/} </} style> <script type = j-ytexcolor/j j j j-ytexcolor. odicclrnode) {// Получить цветный объект, который будет установлен var colorval = odicclrnode.style.backgroundcolor; // alert (colorval); // Установить цвет font document.getelementbyid ("text"). style.color = colorval;} function changecolor2 ("// alert (" aabb = tramece uselet asel -) = Document.GetElementsByName ("selectColor") [0]; var coloptionNodes = oselectnode.options; // Опции Получить сбор объектов опции в объекте SELECT. // for (var x = 0; x <colloptionnodes.length; x ++) {// alert (coloptionNodes [x] .innerhtml); //} // Траверсировать это. //Selected option//alert( colOptionNodes[ oSelectNode.selectedIndex ].innerHTML );var colorVar = colOptionNodes[ oSelectNode.selectedIndex ].value;document.getElementById("text").style.color=colorVar;}function changeColor3(){var oSelectNode = document.getElementsByName("selectColor")[1];var colOptionNodes = oSelectNode.options;var colorVar = colOptionNodes[ oSelectNode.selectedIndex ].value;document.getElementById("text").style.color=colorVar;}</script></head><body><div id="clr1" Style = "фоновый цвет: черный" onclick = "ChangeColor (this)"> </div> <div Id = "clr1" style = "foangy-color: red" onclick = "Changecolor (this)"> </div> <div id = "clr2" style = "foanle-color: green" onclick = "changecolor (this)"> </div> <divid yel "onclick =" changecolor (this) "> </div> <divid Id". onclick = "Changecolor (this)"> </div> <div id = "clr4" style = "фоновый цвет:#c0c0c0;" onclick = "ChangeColor (this)"> </div> <div id = "clr5" style = "founal-color:#00ffff" onclick = "ChangeColor (this)"> </div> <div id = "text"> <img src = ""/> <br/> Показать эффект. Text <br/> </div> <hr/> <!-// В этом примере не подходит для регистрации события OnClick для выбора, потому что <select name = "selectColor" onclick = "ChangeColor2 ()">-> <br/> <select name = "selectColor" onchange = "ChangeColor2 ()"> <platie value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option><option value="#c0c0c0">Silver</option></select><hr/><select name="selectColor" onchange="changeColor3()"><!--background-color Set background color--><option value="black" Style = "founal-Color: Black">-Select Color-</option> <option value = "red" style = "founal-color: red"> </option> <vitue value = "green" style = "founal-color: green"> </option> <value = "blue" style = "founal-color: blue"> </option> value = "#c0c0c0" " </option> </select> </body> </html>360 Браузер 8.1 Демонстрационные результаты:
Эта выпадающая коробка объясняется словами.
Выпадающая коробка ниже напрямую использует цвет, чтобы указать, почему текст установлен
Увеличенный раскрывающийся список - меню вторичной ссылки - Демонстрация кода:
Реализованная функция заключается в определении отображения второго меню на основе параметров первого меню.
<html> <Head> <tite> DHTML Технологическая демонстрация технологии ---- Использование меню SELECT-SECORDOUS LINC «Коллекция провинций-город», и данные поступят из фонового фона вар-collprovices = {«Пекин»: [«Хайдианский район», «Dongcheng District», «район Xicheng», «Chaoyang District»], "Чжэцзян": [Ханчжоу "," Ningbo ", 'Jinhua', Wenzhou", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ']: ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",' jinhua ',", ",' hunzhou ',' ningbo ' ['Yiyang', 'Changsha', 'Zhuzhou', 'xiangtan'], "jiangxi": ['nanchang', 'jiujiang', 'pingxiang', 'shangrao']}; // {} Это можно хранить ключ: стоимость может быть любому // alert (collprovices ["beijing"] [2]); // xicheng District // Получить город подчиненного в провинцию, выбранную пользователем var oselnode = document.getElementbyid ("selid"); var index = oselnode.selectedIndex; // Какой элемент выбран, return varie proviesname = oselnode. Выбранный элемент valuevar arrcities = collprovices [proviceName]; // Получить городской массив выбранной провинции var osubselnode = document.getElementbyid («subselid»); // Получить второй раскрывающий объект // Очистить оригинальный содержимое в раскрывающемся меню «Подсельдо» // Примечание после того, как Array является Atray. Для (var x = 1; x <osubselnode.options.length;) {// Обратите внимание, что после удаления массива длина автоматически обновляется, поэтому не используйте "x ++" для исправления в течение последнего времени // osubselnode.removechild (osubselnode.options [x]); // osubselnode. OsubSelNode [x] и OsubSelnode.options [x] // Метод 2-RemoveChild из Back // for (var x = osubselnode.length-1; x> = 1; x-) {// osubSelnode.removeChild (osubSelnode [x]); //} // Метод 3-supposeSeachilds непосредственно. osubselnode.length.length = 1; // Установить длину на 1, затем оставшиеся параметры будут удалены автоматически // Добавить каждый элемент в коллекцию города в раскрывающееся меню «Подсезо» для (var x = 0; x <arrcities.length; x ++) {var optionnode = document.createElement ("option"); optionnode.innerhtml = arrcities [x]; // optionnode.value = ... [x]; // Формальная разработка, должно быть присвоено значение, соответствующее этой опции, поэтому мы опускаем его здесь. OsubSelnode.appendChild (optionnode);}} </script> </head> <body> <select id = "selid" onchange = "selectCity ()"> <опция>-выберите провинцию-</option> <option value = "peijing"> peciging </option> <опция value = "hunan"> value = "Zhejiang"> Zhejiang </option> <option value = "jiangxi"> jiangxi </option> </select> <select id = "subselid"> <опция>-выберите City-</option> </select> </body> </html>360 Браузер 8.1 Демонстрационные результаты:
Добавить и удалить вложения для компонентов файлов
Нет никакой функции, чтобы связаться с фоном, просто изучите технологию в HTML
Демо -код:
<html> <Head> <title> DHTML-технологический компонент-компонент и удаление вложений </title> <Meta HTTP-equiv = "content-type" content = "text/html; charset = utf-8"/> <стиль тип = "text/css">/*a: ссылка. A: Посетимый статус после обращения. A: Навороте курсор перемещается к статусу на гиперссылке (не нажимается). A: Активная статус при нажатии на гиперссылку. Используйте заказ: lvha*/table a: ссылка, таблица A: посещено, img {text-decoration: none;/* Получить или установить украшение текста в объекте. Текстовое декорация: нет: значение по умолчанию. Нет декоративного мигания: Blink Underline: Thround-Through: Через линейку Overline: Overline*/color:#0000ff;} Таблица A: Hover {Color:#ff0000;} </style> <script type = "text/javascript"> function addfile () {variLeTableNode = document.GetElementById ("failable"); {variLeTablenode = decultelementByid ("failable"); OfileTableNode.InserTrow (); // Вставка Создайте новую строку (TR) в таблице и добавьте коллекцию строк. var otdnodefile = otrnode.insertcell (); // insertcell Создайте новую ячейку в строке таблицы (TR) и добавьте ячейку в сбор ячеек. otdnodefile.innerhtml = "<input type = 'file'/>"; var otdnodedel = otrnode.insertcell (); // Использовать текст // otdnodedel.innerhtml = "<a href = 'javascript: void (0)' onclick = 'deletefile (this)'> atelet atelet atelet atelet atelet strakempmip '/href =' javascript: void (0) 'onclick =' deletefile (это). Изображение --- Найдите изображение самостоятельно и назовите его a.jpg-или изменить код otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'delete attachment' onclick = 'deletefile (this)'/>";} функция deletefile (oanode) {// tag parent node is td и td. var otrnodedel = oanode.parentnode.parentnode; // trotrnodedel.parentnode.removechild (otrnodedel);} </script> </head> <body> <Таблица идентификатор = "fileletable"> <tr> <th> <a href = "javascript: void (0)" addfil addfil addfilck = "addfik =" addfile = "addfile (). Приложение </a> </th> </tr> <! --- Нажмите кнопку, чтобы добавить вложения, поэтому не используйте HTML, запишите в JavaScript <Tr> <Td> <input Type = "file"/> </td> <td> <a href = "Javascript: void (0)" Onclick = "DeleTefile (This)"> DELETE ATTHATERMOND </1> <//> DELETE <//> DELETE <//> DELETETIONMANDMAND </TERTETIONMAND </TER> <//> delete <//> delete <//> delete </ratemprompring <//> deletefile (Thryfile (Thryfile (This). </table> </body> </html>360 Браузер 8.1 Демонстрационные результаты:
Удалить вторую строку TR:
Выше приведено соответствующие знания о добавлении файловых эффектов на основе JavaScript, основанного на JavaScript для вас. Я надеюсь, что это будет полезно для вас. Если вы хотите узнать больше, обратите внимание на wulin.com!