Bagian ini menjelaskan implementasi menu kotak radio/tarik-turun/tambahkan file, sintesis CSS, HTML dan JavaScript. Detail spesifiknya adalah sebagai berikut:
Kotak Radio:
Fungsi yang diterapkan adalah: (mirip dengan tes kepribadian biasa)
Sembunyikan sebagian halaman terlebih dahulu, lalu tampilkan dengan mengklik kotak radio.
Kemudian berikan komentar dengan memilih opsi - (setiap opsi memiliki poin yang berbeda)
Kode demo:
<Html> <Head> <title> DHTML Teknologi Demonstrasi --- Penggunaan Radio </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">#contentId {tidak ada: tidak ada;/*show: default hidden/css ">#{tidak ada: tidak ada:/*show: default hidden/css">#{tidak ada: tidak ada:/*show: Default hidden/css ">#{tidak ada: tidak ada:/*show: default hidden/css"> {tidak ada; Daftar*/Latar Belakang:#80FF00;/*Warna latar belakang*/List-style: none; // Dot default sebelumnya membatalkan margin: 0px; // patch eksternal} ul li {/*atur warna font li dalam ul*/color:#ff0000;}. Tutup {display: none;}. buka {blok: {ff0000; showContent (oradionode) {var odivnode = document.geteLementById ("contentId"); if (oradionode.value == "yes") {odivnode.style.display = "block"; } else {odivnode.style.display = "none";} // Cara kedua: gunakan dengan/*dengan (odivNode.Style) {if (oradionode.value == "ya") {display = "block";} else {display = "none";}} fungsi showResul ({{none) {none ";} {{none"; document.getElementsbyname ("nol"); var val = 0; // tidak ditentukan jika digunakan sebagai tipe boolean false // waspada (val); for(var x=0;x<oNolRadioNodes.length;x++ ){//Finding the selected radio box if(oNolRadioNodes[x].checked){val = parseInt(oNolRadioNodes[x].value );break;}}if(!val){document.getElementById("erroinfo").innerHTML="No answer is dipilih ".fontColor (" merah "); return;} // pesan kesalahan ditetapkan untuk kosong. document.geteLementById ("erroinfo"). innerHtml = ""; if (val> = 1 && val <= 3) {document.getElementById ("res_1"). className = "open"; document.geteLementById ("res_2"). className = "tutup";} else {document .geteLementById ("res_1"). className = "tutup"; document.geteLementById ("res_2"). className = "open";}} </script> </head> <body> <vli> do Anda ingin berpartisipasi dalam kuesioner? <br/> <!-Nama kotak radio Radio sama dengan saling eksklusif-> <input type = "Radio" name = "wenjuan" value = "yes" onclick = "showcontent (this)"/> ya <input type = "Radio" name = "wenjuan" value = "no" onclick = "showcontent (this)" name = "wenjUan" value = "no" onclick = "showcontent (this)" name "name =" no value "no" no "no" no "no no" no check-content " id = "ContentId"> Cari Konten: <br/> Nama Anda: <Input Type = "Text" Name = "Name"/> <br/> Nomor telepon Anda: <Input Type = "Text" Name = "Tel"/> </Div> <hr/> <h2> Selamat datang untuk berpartisipasi dalam tes kepribadian Anda </h2> <h3> pertanyaan 1: </h3> </h3> apa buah Anda </h2> <h3> pertanyaan 1: </h3> </h3> apa favors </h2> <h3> pertanyaan 1: </h3> </h3> apa buah Anda </h2> <h3> pertanyaan 1: </h3> </h3> apa buah Anda </h2> <h3> pertanyaan 1: </h3> </h3> apa uji kepribadian </h2> <h3> apa 1: </h3> </h3> apa uji kepribadian </h2> </span> <ul id = "nolul"> <li> <input type = "Radio" name = "nol" value = "1"/> anggur </li> <li> <input type = "Radio" name = "nol" value = "2"/> noLMelon </li> <li> <input type = "radio" name = "nol" noL "nol" noL "nol" noL "noL" noL "NOL" NOL "NOL =" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL "NOL" NOL " name = "nol" value = "4"/> mangga </li> <li> <input type = "Radio" name = "nol" value = "5"/> cherry </li> </ul> <Div> <input type = "Tombol" value = "view uji" onclick = "showResult ()"> <span ID = "erroin" oDROIN "Anda =" result () "> <span id =" erroinfo "Anda" onclick = "showResult ()"> <span ID = "erroinfo" your "onclick =" showResult () "<span span ID =" erroinfo "your" <"result ()"> <span ID = "erroinfo" your "onclick =" showResult () "<span span ID =" erroinfo "your" <"result <" introvert, saran. . . </div> <div id = "res_2"> di atas 4 poin: Kepribadian Anda ekstrovert, saran. . . </div> </div> </body> </html>360 Browser 8.1 Hasil Demonstrasi:
Halaman di awal:
Pilih "Ya" di kotak radio:
Tips Saat Tidak Memilih Buah:
Tips Saat Memilih Buah:
Daftar drop-down:
Kode demo sederhana:
<html> <head> <title> DHTML Teknologi Demonstrasi --- Penggunaan SELECT </iteme> <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;/*patch eksternal lower*/} #text {clear: kiri;/*float tidak dapat mengapung di kiri*/} </style </style> function = "TEKP; odicclrnode) {// Dapatkan objek warna yang akan ditetapkan var colorval = odicclrnode.style.backgroundColor; // waspada (colorval); // atur warna dokumen font.getElementById ("Text"). Style.color = colorval;} function changecolor2 () {) {) {) {"//{"//{"colorval;} function changecolor2 () {) {) {) {) {) {) {) {) {) {) {) {) {") document.geteLementsByName ("selectColor") [0]; var coloptionnodes = oselectnode.options; // opsi dapatkan kumpulan objek opsi di objek pilih. // untuk (var x = 0; x <colloptionnodes.length; x ++) {// alert (coloptionnodes [x] .innerHtml); //} // lintasi. // Opsi yang Dipilih // Peringatan (coloptionnodes [oselectnode.selectedIndex] .innerHtml); var colorvar = coloptionnodes [oselectNode.SelectedIndex] .value; document.geteLementById ("teks"). Style.color = colorvar;} function changecol ("text"). Style.color = colorvar;} changecol ("text"). Colorvar; colorvar;} changecol ("teks"). Document.getElementsbyName ("SelectColor") [1]; var coloptionnodes = oselectnode.options; var colorvar = coloptionnodes [oselectnode.SelectedIndex] .value; document.getElementById ("teks"). style.color = colorvar;} <//"body> </text"). style.color = colorvar;} </} </} </}} </"Text"). style = "latar belakang-warna: hitam" onsclick = "changeColor (this)"> </div> <div id = "clr1" style = "latar belakang-warna: merah" onclick = "changeColor (this)"> </div> <div id = "clr2" style = "latar belakang-color: green" onclick = "changecolor (ini)" clr2 "> latar belakang" click "click" click "click =" changecolor (ini ">" OnClick = "ChangeColor (this)"> </div> <div id = "clr4" style = "latar belakang-warna:#c0c0c0;" OnClick = "ChangeColor (this)"> </div> <div id = "clr5" style = "latar belakang-kolor:#00ffff" onclick = "changeColor (this)"> </div> <Div ID = "Teks"> <img src = ""/> <br/> Tampilkan efek efek <br/> Teks Efek <br/> <br/br/br/br/br/br/br/> <br/br/> Teks Efek <br /> TEKS EFEKTIF <br/BR/BR/BR/BR/BR/BR/BR/BR/BR/BR/BR/BR/> TEKS EFEK TEKS <br/> TEKS EFEKS <br/> text<br/></div><hr/><!-- //In this example, it is not appropriate to register an onclick event for select, because <select name="selectColor" onclick="changeColor2()">--><br/><select name="selectColor" onchange="changeColor2()"><option value="black">--Select color--</option><option value = "red"> merah </pection> <option value = "green"> green </pection> <option value = "blue"> blue </tiption> <option value = "#c0c0c0"> silver </pection> </schect> <hr/> <pilih name = "selectColor" onchange = "changeColor3 ()"> <!-latar belakang color = Onchange = "changeColor3 ()"> <!-latar belakang color = Onchange = "changeColor3 ()"> <! style = "latar belakang-warna: hitam">-Pilih warna-</tiption> <option value = "red" style = "latar belakang-warna: merah"> </tiption> <option value = "green" style = "latar belakang-warna: hijau"> </tiption> <option value = "blue" style = "latar belakang-color: blue"> </option> <option value = "#c0c0" color = color = col "> </option> <col-c-col"> C-Color = C-COLA0 " </pection> </dectle> </body> </html>360 Browser 8.1 Hasil Demonstrasi:
Kotak drop-down ini dijelaskan dengan kata-kata.
Kotak drop-down di bawah ini secara langsung menggunakan warna untuk menunjukkan mengapa teks diatur
Daftar drop -down yang diperkuat - Menu Tautan Sekunder - Demonstrasi Kode:
Fungsi yang diimplementasikan adalah untuk menentukan tampilan menu kedua berdasarkan opsi menu pertama.
<html><head><title>DHTML technology demonstration----use of select--secondary link menu</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript">function selectCity(){//json: Use a two-dimensional array to store "province-city collection", dan data akan berasal dari latar belakang var collprovices = {"beijing": ['distrik haidian', 'distrik dongcheng', 'distrik xicheng', 'distrik chaoyang'], "zhejiang": ['hangzhou', 'ningbo', 'jinhua', 'wenzhou'], "],"], "jinhua", 'wenzhou'], "],"], "jinhua", 'wenzhou'], "wenzhou '," wenzhou'], "wenzhou '," wenzhou', "wenzhou '," wenzhou'] ['Yiyang','Changsha','Zhuzhou','Xiangtan'],"jiangxi" : ['Nanchang','Jiujiang','Pingxiang','Shangrao']};//{} This is used to store key:value, value can be of any type (an array set can be), [] This is an array // alert (collprovices ["beijing"] [2]); // xicheng distrik // Dapatkan kumpulan subordinat kota ke provinsi yang dipilih oleh pengguna var oselnode = document.getElementById ("selid"); var index = oselnode.selectedIndex; // item mana yang dipilih, pengembalian var var provisi = oselnode.selectedIndex; // item mana yang dipilih, mengembalikan nomor var provisi = oselnode.selectedIndEx; Item Valuevar Arrcities = CollProvices [provicename]; // Dapatkan array kota dari provinsi yang dipilih var osubselnode = document.geteLementById ("subselid"); // Dapatkan daftar drop-down kedua // hapus konten asli dalam menu drop-down "Subselid" // Perhatikan bahwa setelah array dielet, long-length. x = 1; x <osubselnode.options.length;) {// Perhatikan bahwa setelah array dihapus, panjangnya secara otomatis diperbarui, jadi jangan gunakan "x ++" untuk mengoreksi waktu terakhir // osubselnode.removechild (osubselnode.options [x]); //}//osubselnode. 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] );// }// Method 3-Suppose directly assigns oSubSelNode.options.length or osubselnode.length.length = 1; // Setel panjang ke 1, maka opsi yang tersisa akan dihapus secara otomatis // Tambahkan setiap elemen dalam koleksi kota ke menu tarik-turun "subselid" untuk (var x = 0; x <arrcities.length; x ++) {var optionNode = document.createelement ("option"); OptionNode.innerHtml = arrcities [x]; // optionNode.value = ... [x]; // Pengembangan formal, harus ada nilai yang sesuai dengan opsi ini untuk ditetapkan, jadi kami menghilangkannya di sini. oSubSelNode.appendChild(optionNode);}}</script></head><body><select id="selid" onchange="selectCity()"><option>--Select province--</option><option value="beijing">Beijing</option><option value="hunan">Hunan</option><option value = "zhejiang"> zhejiang </pection> <option value = "jiangxi"> jiangxi </pection> </dect> <pilih id = "subselid"> <pection>-pilih kota-</pect> </pilih> </body> </html>360 Browser 8.1 Hasil Demonstrasi:
Tambahkan dan hapus lampiran untuk komponen file
Tidak ada fungsi untuk menghubungi latar belakang, cukup pelajari teknologi dalam HTML
Kode demo:
<html> <head> <title> DHTML Teknologi-File-Component-Add dan Hapus Lampiran </itement> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">/a: tautan hyperlink tidak diklikt. A: Status yang dikunjungi setelah diakses. A: Arahkan kursor bergerak ke status pada hyperlink (tidak diklik). A: Aktif status saat mengklik hyperlink. Gunakan pesanan: lvha*/tabel a: tautan, tabel A: dikunjungi, img {teks-dekorasi: tidak ada;/* ambil atau atur dekorasi teks dalam objek. Dekorasi Teks: Tidak Ada: Nilai Default. Tidak ada blink dekoratif: blink garis bawah: garis bawah-melalui: melalui garis overline: overline*/warna:#0000ff;} Tabel A: hover {color:#ff0000;} </style> <script type = "text/javascript"> function addfile () {var OfileTablenode = document.getelementbyid ("" var {var OF OFOLETABLENODE = document.getelementByid (" Ofiletablenode.InserTrow (); // InserTrow Buat baris baru (TR) di tabel dan tambahkan koleksi baris. var otdnodefile = otrnode.insertcell (); // masukkancell Buat sel baru di baris tabel (TR) dan tambahkan sel ke koleksi sel. otdnodefile.innerHtml = "<input type = 'file'/>"; var otdnodedel = otrnode.insertcell (); // menggunakan teks // otdnodedel.innerHtml = "<a href = 'javascript: void (0)' on '; Gambar --- Temukan gambar sendiri dan beri nama a.jpg-atau ubah kode otdnodedel.innerHtml = "<img src = 'a.jpg' alt = 'hapus lampiran' ontClick = 'deleteFile (this)'/>";} function deleteFile (oAnode) {// a tag induk node node node node node node node, node node node node. var otrnodedel = oanode.parentnode.parentnode; // trotrnodedel.parentnode.removechild (otrnodedel);} </script> </head> <body> <Table id = "FileTable"> <tr> <th> <a href = "javascript: void" "void" "void" "void" "void" "void" "void" " Lampiran </a> </tr> </tr> <! --- Ketuk tombol untuk menambahkan lampiran, jadi jangan gunakan html, tulis dalam JavaScript <tr> <td> <input type = "file"/> </td> <td> <a href = "javascript: void (0)" onklick = "this href =" ini) </able> </body> </html>360 Browser 8.1 Hasil Demonstrasi:
Hapus tr line kedua:
Di atas adalah pengetahuan yang relevan tentang menambahkan efek file berdasarkan JavaScript berdasarkan JavaScript kepada Anda. Saya harap ini akan membantu Anda. Jika Anda ingin tahu lebih banyak, harap perhatikan wulin.com!