このセクションでは、ラジオボックス/ドロップダウンメニューの実装/ファイルの追加、CSS、HTML、JavaScriptの合成について説明します。具体的な詳細は次のとおりです。
ラジオボックス：
実装された関数は次のとおりです。（通常の人格テストと同様）
最初にページの一部を非表示にしてから、ラジオボックスをクリックして表示します。
次に、オプションを選択してコメントを与えます - （各オプションには異なるポイントがあります）
デモコード：
<html> <head> <title> dhtmlテクノロジーデモンストレーション---ラジオの使用</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">＃contentid {display：none：hidded*/*ul {/} ul {/} ul {/*ul os list*/background-color：＃80ff00;/*background color*/list-style：none; //前のデフォルトのドットキャンセルマージン：0px; //外部パッチ} ul li {/*ul*/color：＃ff0000;}。 showcontent（oradionode）{var odivnode = document.getElementById（ "contentid"）; if（oradionode.value == "yes"）{odivnode.style.display = "block"; } else {odivnode.style.display = "none";} // 2番目の方法：with with（odivnode.style）{if（oradionode.value == "yes"）{display = "block";} els {display = "none";}}*/} document.getElementsByname（ "nol"）; var val = 0; // undefined boolean型として使用される場合はfalse // alert（val）; for（var x = 0; x <onolradionodes.length; x ++）{//選択した無線ボックスの検索if（onolradionodes [x] .checked）{val = parseint（onolradionodes [x] .value）; break;}} if（！val）{document.getelementyid（ "erroinfo"）。 selected ".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"）アンケートに参加したいですか？ <br//> <！ - ラジオラジオボックス名は相互に排他的と同じです - > <入力タイプ= "ラジオ" name = "wenjuan" value = "yes" onclick = "showcontent（this）"/> yes <input type = "radio" name = "wenjuan" value = "no" onclick = "showcontent（this） id = "Contentid">検索コンテンツ：<br/>あなたの名前：<入力タイプ= "テキスト" name = "name"/> <br/>お使いの電話番号：<入力タイプ= "テキスト" name = "tel"/>> </div> <hr/> <h2>パーソナリティテストに参加するように歓迎されます</h2> <h3>お気に入りの果物は何ですか？ </span> <ul id = "nolul"> <li> <入力タイプ= "ラジオ" name = "nol" value = "1"/> grape </li> <li> <入力タイプ= "nol" value = "2"/> watermelon </li> <li> <入力タイプ= "ラジオ" nol "nol" 3 "/li"値= "4"/>マンゴー</li> <li> <入力タイプ= "ラジオ" name "nol" value = "5"/> cherry </li> </ul> <div> <入力タイプ= "ボタン" value = "ビューテスト結果" onclick（） "> <span id =" erroinfo "> </span> <div div =" resid ">"> "resid 。 。 </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 {height：50px; width：50px; float：left;/*float*/margin-right：30px; margin-bottom：20px;/*lower-external patch*/} odicclrnode）{//色オブジェクトを設定しますvar colorval = odicclrnode.style.backgroundcolor; // alert（colorval）; // font document.getelementbyid（ "text"）。style.color= colorval;} function changecolor2（）{aabb "） document.getElementsByname（ "SelectColor"）[0]; var ColoptionNodes = oselectnode.options; //オプション選択オブジェクトでオプションオブジェクトのコレクションを取得します。 //（var x = 0; x <colloptionnodes.length; x ++）{// alert（coloptionnodes [x] .innerhtml）; //} // traverse it。 // selected option // alert（coloptionnodes [oselectnode.selectedindex] .innerhtml）; var colorvar = coloptionnodes [oselectnode.selectedindex] .value; document.getElementbyid（ "text"）。style.color= colorvar;} fulationeColor3 document.getElementsByname（ "SelectColor"）[1]; var ColoptionNodes = oselectnode.options; var colorvar = coloptionnodes [oselectnode.selectedindex] .value; document.getElementbyid（ "text"）。style.color= colorvar;} </scrip style = "background-color：black" onclick = "changecolor（this）"> </div> <div id = "clr1" style = "background-color：red" onclick = "changecolor（this）"> div> <div> <div> <div> <div> < style = "background-color：blue" onclick = "changecolor（this）"> </div> <div id = "clr4" style = "background-color：＃c0c0c0;" onclick = "changecolor（this）"> </div> <div id = "clr5" style = "background-color：＃00ffff" onclick = "changecolor（this）"> </div> <div id = ""> <img src = ""/> <br/> show <br/> show <br/> show <br/>テキスト<br/> </div> <hr/> <！ - //この例では、<select name = "selectcolor" onclick = "changecolor2（）"> - > <br/> <select name = "selectcolor" onchange = "changecolor2（）"> <opts "> <opts"> </</<値= "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（）"> < style = "background-color：black"> - select color- </option> <option値= "red" style = "background-color：red"> </option> <option value = "green" style = "background-color：green"> </option> <option value = "blue" style = "background-color：blue"> </option> <option値</option> </select> </body> </html>360ブラウザ8.1デモンストレーション結果：
このドロップダウンボックスは言葉で説明されています。
下のドロップダウンボックスは直接色を使用して、テキストが設定されている理由を示します
強化されたドロップダウンリスト - セカンダリリンクメニュー - コードデモンストレーション：
実装された関数は、最初のメニューのオプションに基づいて2番目のメニューの表示を決定することです。
<html> <head> <title> dhtmlテクノロジーのデモンストレーション----選択の使用 - セレクトリンクメニュー</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <スクリプトタイプ= "テキスト/javascript"コレクション」、およびデータはバックグラウンドVar Colprovices = {"Beijing"：['Haidian District'、 'Dongcheng District'、 'Xicheng District'、 'chaoyang District']、「Zhijiang」からのものです。 ['yiyang'、 'changsha'、 'zhuzhou'、 'xiangtan']、 "jiangxi"：['nanchang'、 'jiujiang'、 'pingxiang'、 'shangrao']}; // {} // alert（collprovices ["beijing"]] [2]）; // xicheng地区//ユーザーvar oselnode = document.getelementbyid（ "selid"）; var index = oselnode.selecturedindex; // selecteddindex; // selectined getname = getname oselname [getthed oselnode = oselnode.selecturedindex; //項目valuevar arrcities = collprovices [proviceName]; //選択された州の都市配列を取得するvar osubselnode = document.getElementById（ "subselid"）; // 2番目のドロップダウンリストオブジェクト//ドロップダウンメニューで元のコンテンツをクリアする "subselid" // x = 1; x <osubselnode.options.length;）{//配列が削除された後、長さが自動的に更新されるため、「x ++」を使用して最後の時間を修正しないでください。 osubselnode [x] and osubselnode.options [x] // method 2 - removechild from the back // for（var x = osubselnode.length-1; x> = 1; x-）{// osubselnode.removechild（osubselnode [x]）; osubselnode.length.length = 1; //長さを1に設定すると、残りのオプションが自動的に削除されます//市コレクションの各要素をドロップダウンメニューに追加します（var x = 0; x <arrcities.length; x ++）{var optionnode = documentnode.createelement（ "option"）; optionNode.innerhtml = arrcities [x]; // optionnode.value = ... [x]; //正式な開発、割り当てられるこのオプションに対応する値がある必要があるため、ここで省略します。 osubselnode.appendChild（optionNode）;}} </script> </head> <body> <select id = "selid" onchange = "selectcity（）"> <option> - select staving- </option> <option value = "beijing"> beijing </option </option> <option value = "hunan"> hunan </option> < value = "Zhejiang"> Zhejiang </option> <option value = "jiangxi"> jiangxi </option> </select> <select id = "subselid"> <option> - select city- </option> </select> </body> </html>360ブラウザ8.1デモンストレーション結果：
ファイルコンポーネントの添付ファイルを追加および削除します
背景に連絡する機能はありません。HTMLでテクノロジーを学ぶだけです
デモコード：
<html> <head> <title> dhtmlテクノロジーファイルコンポーネントADDおよび削除添付ファイル</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">/*a：like not not not not not not not not。 A：アクセスした後の訪問ステータス。 A：カーソルの移動は、ハイパーリンクのステータスに移動します（クリックしません）。 A：ハイパーリンクをクリックするときにステータスをアクティブにします。順序を使用：LVHA*/テーブルA：リンク、テーブルA：訪問、IMG {テキストゼロ：なし;/*オブジェクト内のテキストの装飾を取得または設定します。テキストデカレーション：なし：デフォルト値。装飾的な瞬き：ブリンクの下線：下線スロー：ラインオーバーライン：オーバーライン*/色：＃0000ff;}テーブルA：hover {color：＃ff0000;} </stirce> <スクリプトタイプ= "テキスト/javascript"> function addfile（）{var ofiletablenode = document.getElementableid（filetable ";" filetable "）; ofileTableNode.insertrow（）; // Insertrowテーブルに新しい行（TR）を作成し、行コレクションを追加します。 var otdnodefile = otrnode.insertcell（）; // insertcellテーブル行（TR）に新しいセルを作成し、セルをセルコレクションに追加します。 otdnodefile.innerhtml = "<input type = 'file'/>"; var otdnodedel = otrnode.insertcell（）; // text // otdnodedel.innerhtml = "<a href = 'javascript：void（0）' boid（0） 'deletefile画像---自分で画像を見つけて名前を付けてa.jpg-またはCode otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'delete attachment' onclick = 'deletefile（this）'/>";} function deletefile（oanode）{// td parent nodeです。 var otrnodedel = oanode.parentnode.parentnode; // trotrnodedel.parentnode.removechild（otrnodedel）;} </script> </head> <body> <table> <table> "filetable"> <tr> <th> <a href = "javascript：" add "添付ファイル</a> </th> </tr> <！---ボタンをタップして添付ファイルを追加するので、htmlを使用しないで、javascript <tr> <td> <入力タイプ= "ファイル"/> </td> <td> <a href = "javascript：void（0）" onclick = "deletefile（this）"> delete </table> </body> </html>360ブラウザ8.1デモンストレーション結果：
2行目のtrを削除します：
上記は、JavaScriptに基づいてJavaScriptに基づいてファイル効果を追加することに関する関連知識です。それがあなたに役立つことを願っています。もっと知りたい場合は、wulin.comに注意してください！