hujung hadapan web
tutorial js
simulasi js kemahiran pelaksanaan menu pemilihan pelbagai peringkat Taobao_javascript
simulasi js kemahiran pelaksanaan menu pemilihan pelbagai peringkat Taobao_javascript
Contoh dalam artikel ini menerangkan kaedah pelaksanaan js mensimulasikan menu pemilihan pelbagai peringkat Taobao. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah kod menu pilihan berbilang peringkat yang mensimulasikan Taobao mengikut tahap, dan akhirnya menentukan data.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/
Kod khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟淘宝网菜单选择</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
body *{
font-size:14px;
margin:0;
padding:0;
}
#CategorySelector{
clear:both;
width:778px;
height:220px;
background-color:#FFF;
margin-bottom:8px;
}
#CategorySelector ul{
margin:0 3px 0 0;
padding:0;
border:1px solid #CCC;
float:left;
width:189px;
height:218px;
overflow:auto;
}
#CategorySelector ul.Blank{
background-color:#F6F6F6;
}
#CategorySelector li{
list-style-type:none;
width:auto;
height:20px;
margin:0 1px !important;
margin /**/:0 1px 0 -15px;
padding:0;
border:1px solid #FFF;
line-height:20px;
color:#444;
text-indent:3px;
cursor:default;
}
#CategorySelector li.Selected{
background-color:#CAFFC0;
border:1px solid #0A9800;
color:#006623;
}
#CategorySelector li.IsParent{
background-image:url(http://files.jb51.net/file_images/article/201508/201581893903737.gif);
background-position:99% 50%;
background-repeat:no-repeat;
}
#CategorySelector li.RecentUsed{
color:#170;
}
#CategoryTitle{
clear:both;
width:778px;
background-color:#FFF;
}
#CategoryTitle ul{
float:left;
}
#CategoryTitle li{
margin:0 3px 0 0;
float:left;
border:1px solid #CCC;
width:189px;
color:#0063C8;
font-weight:bold;
border-bottom:0px;
height:23px;
line-height:23px;
}
</style>
</head>
<body>
<div id="CategoryTitle">
<ul id="TitleContent">
<li> 选择宝贝类别</li>
<li> 选择游戏</li>
<li> 选择游戏区域</li>
<li> 选择服务器</li>
</ul>
</div>
<div id="CategorySelector">
<ul id="Category_ItemType" class="Blank">
</ul>
<ul id="Category_GameType" class="Blank">
</ul>
<ul id="Category_GameArea" class="Blank">
</ul>
<ul id="Category_GameServer" class="Blank">
</ul>
</div>
<script language="javascript" type="text/javascript" id="commonjs">
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e)
{
var re = new RegExp(this.S+e+this.S);
return re.test(this.S+this.join(this.S)+this.S);
}
function DataContent()
{
this.Parent; // Parent Tags
this.ParentID;
this.Children; // Children Tags
this.ChildrenID;
}
function DataServer()
{
this.mList = new Array();
this.ListCount = function(){return this.mList.length;}
this.GetListObj = function(n)
{
if (n<this.ListCount()) return this.mList[n];
return null;
}
this.Add = function(sParent,sParentID,sChildren,sChildrenID)
{
obj = new DataContent();
obj.Parent = sParent;
obj.ParentID = sParentID;
obj.Children = sChildren;
obj.ChildrenID = sChildrenID;
this.mList[this.ListCount()] = obj;
}
}
function getTriggerNode(e) {
return (document.all)?event.srcElement:e.target;
}
function getObject(objID)
{
return document.getElementById(objID);
}
function CreateList(objName,objData,objSelected)
{
var listBox = getObject(objName[0]);
if(!listBox) return;
var strOutput = "";
var liClass = "";
var id = 0;
var op_txt = new Array();
var op_val = new Array();
var sub_val = new Array();
if (objSelected[0])
{
for(i=0;i<objData.ListCount();i++)
if(objData.GetListObj(i).ParentID==objSelected[0])
{
id = i;
break;
}
if(i==objData.ListCount()){
listBox.innerHTML="";
listBox.className="Blank";
return false;
}
}
if(objName[1])
for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).ParentID));
tmpobj = objData.GetListObj(id);
if (tmpobj.Children.length==0)
{
for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).Parent),op_val.push(objData.GetListObj(i++).ParentID));
}
else
{
op_txt = tmpobj.Children;
op_val = tmpobj.ChildrenID;
}
for(i=0;i<op_txt.length;i++)
{
if(sub_val.in_array(op_val[i]))
liClass = "IsParent";
if(op_val[i] == objSelected[1]){
liClass += " Selected";
}
strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';
liClass = '';
}
listBox.innerHTML = strOutput;
strOutput = "";
listBox.className="";
}
function changeCategoryStyle(ulID,liCurr){
if(lastSelectItem[ulID]){
lastSelectItem[ulID].className=lastSelectItem[ulID].className.replace("Selected","").replace(/\s+$/,"");
}
liCurr.className += " Selected";
lastSelectItem[ulID] = liCurr;
}
function changeCategory(evnt)
{
var obj = getTriggerNode(evnt);
var obj2 = obj;
if(obj2.nodeName=="DIV") return (0);
if(obj.nodeName != "LI")
obj = obj.parentNode;
while(obj2.nodeName != "UL")
obj2 = obj2.parentNode;
if(obj.nodeName != "LI") return;
changeCategoryStyle(obj2.id,obj);
var parentID = (obj.id).split("__")[1];
switch(obj2.id)
{
case itemtype:
break;
case gametype:
CreateList([gamearea,gameserverData],gameareaData,[parentID,0]);
break;
case gamearea:
CreateList([gameserver,],gameserverData,[parentID,0]);
break;
}
}
var cselect = "CategorySelector";
var itemtype = "Category_ItemType";
var gametype = "Category_GameType";
var gamearea = "Category_GameArea";
var gameserver = "Category_GameServer";
var lastSelectItem = {itemtype:new Object(),gametype:new Object(),gamearea:new Object(),gameserver:new Object()};
var itemtypeData = new DataServer();
itemtypeData.Add("武器",1,[],[]);
itemtypeData.Add("防具",2,[],[]);
var gametypeData = new DataServer();
gametypeData.Add("魔力宝贝",1,[],[]);
gametypeData.Add("仙境传说",2,[],[]);
var gameareaData = new DataServer();
gameareaData.Add("魔力宝贝",1,["天歇","牧羊"],[1,2]);
gameareaData.Add("仙境传说",2,["上海","北京"],[3,4]);
var gameserverData = new DataServer();
gameserverData.Add("天歇",1,["平顶","山顶"],[1,2]);
gameserverData.Add("牧羊",2,["平顶2","山顶2"],[3,4]);
//gameserverData.Add("上海",3,["sfdsadfas","sdf"],[5,6]);
gameserverData.Add("北京",4,["asdf","asdff"],[7,8]);
CreateList([itemtype,],itemtypeData,[0,0]);
CreateList([gametype,gameareaData],gametypeData,[0,0]);
getObject(cselect).onclick = changeCategory;
</script>
</body>
</html>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Bagaimana untuk menyemak di mana alamat penghantaran Taobao? Bagaimana untuk menyemak alamat penghantaran pesanan yang dibuat pada aplikasi Taobao
Mar 12, 2024 pm 04:00 PM
Apl Taobao boleh memenuhi semua masalah membeli-belah anda Terdapat begitu banyak peniaga di sini dan begitu banyak produk menunggu untuk anda pilih Tidak kira apa jenis produk yang anda ingin beli, anda boleh mencari dan mencarinya di sini membuat pesanan dan pembelian, dan semua fungsi boleh dikendalikan secara bebas Apabila anda membuat pesanan dengan jayanya, anda hanya perlu menunggu untuk pedagang menghantar barang dan menjalankan penghantaran logistik lokasi penghantaran produk ini dan mengetahui ke mana produk mereka dihantar Terutama apabila anda membeli beberapa produk elektronik, anda boleh menyemak beberapa maklumat lokasi penghantaran untuk mengelakkan masalah membeli beberapa mesin yang telah diperbaharui.
Bagaimana untuk mendapatkan sampul merah percuma Taobao 2024
May 09, 2024 pm 03:22 PM
Acara pesanan percuma Taobao 2024 akan diadakan tiga kali sehari Semua orang perlu membuat pesanan dan membayar jumlah barangan yang sepadan pada masa yang sama Jumlah pesanan percuma akan diedarkan dalam bentuk sampul merah dengan jumlah yang sama. Seterusnya, saya akan bawakan kepada anda cara menerima sampul merah tempahan percuma Taobao pada tahun 2024: dapatkannya Bagi pengguna yang percuma, kelayakan sampul merah akan dikeluarkan kepada kad dan pakej kupon, yang dalam keadaan pengaktifan; versi web Taobao pada masa ini tidak mempunyai kad dan pakej kupon, dan hanya memaparkan rekod kemenangan bagi acara pesanan percuma; Cara mendapatkan sampul merah percuma Taobao 20241. Bagi pengguna yang mendapatkan pesanan percuma, kelayakan sampul merah akan diedarkan kepada pakej kad dan kupon, yang sedang dalam keadaan menunggu pengaktifan 2. Versi web Taobao pada masa ini tidak mempunyai pakej kad dan kupon, dan hanya memaparkan rekod kemenangan bagi aktiviti pesanan percuma ;3.
Bagaimana untuk menolak mesej daripada orang yang tidak dikenali di Taobao
Mar 02, 2024 am 08:40 AM
Dalam proses menggunakan Taobao, kami akan menerima mesej daripada beberapa pengguna pelik. Perkara berikut akan memperkenalkan anda kepada cara menyediakan penolakan mesej daripada orang yang tidak dikenali. 1. Selepas membuka Taobao pada telefon mudah alih anda untuk memasuki antara muka, klik item "Mesej" di bahagian bawah untuk beralih kepadanya, dan kemudian klik ikon "+" di bahagian atas sebelah kanan untuk membukanya. 2. Tetingkap akan muncul di bawah ikon, klik dan pilih item "Tetapan Mesej". 3. Terdapat "Stranger Chat Settings" pada halaman tetapan mesej, klik padanya untuk masuk. 4. Akhir sekali, anda akan melihat fungsi "Tolak mesej daripada orang yang tidak dikenali" dalam antara muka yang anda masukkan. Klik butang suis yang sepadan di belakangnya. Apabila butang ditetapkan kepada warna, butang itu dihidupkan dan anda tidak lagi akan menerima mesej daripada pengguna yang tidak dikenali apabila menggunakan Taobao.
Bagaimana untuk mematikan pembayaran tanpa kata laluan di Taobao Bagaimana untuk membatalkan kaedah tetapan pembayaran tanpa kata laluan.
Mar 12, 2024 pm 12:07 PM
Terdapat begitu banyak fungsi pada APP Taobao Fungsi ini wujud supaya semua orang boleh mendapatkan pengalaman membeli-belah yang lebih baik boleh mencari mengikut kategori atau terus mencari produk ini. Semua orang boleh membeli-belah dalam talian dengan penuh keyakinan anda membeli-belah di sini, anda akan menemui pelbagai kaedah membeli-belah di sini yang membolehkan anda memilih beberapa orang menyukai fungsi pembayaran tanpa kata laluan di sini, dan ada yang tidak begitu menyukainya, tetapi saya rasa keselamatannya tidak begitu tinggi Sudah tentu, semua orang boleh membatalkan pada bila-bila masa.
Bagaimana untuk menukar nama di Taobao
Mar 24, 2024 pm 03:31 PM
Fungsi menukar nama membolehkan pengguna menukar nama dan nama panggilan mereka secara bebas dalam Taobao Sesetengah pengguna tidak tahu cara menukar nama mereka di Taobao Cuma klik pada akaun Taobao avatar dalam tetapan dalam My Taobao untuk mengubahnya. editor akan membawanya kepada anda Ini adalah pengenalan kepada cara menukar nama dan nama panggilan anda Jika anda belum tahu, sila muat turun dan cuba. Tutorial penggunaan Taobao Cara menukar nama Taobao Jawapan: Klik pada akaun Taobao avatar dalam tetapan dalam My Taobao untuk mengubahnya Butiran: 1. Masukkan Taobao dan klik [Taobao Saya] di sebelah kanan bawah. 2. Klik ikon [Tetapan] di bahagian atas sebelah kanan. 3. Klik avatar. 4. Klik [Akaun Taobao] sekali lagi. 5. Klik [Modify Account Name], masukkan dan ubah suainya.
Cara mematikan peringatan sampul merah di Taobao
Apr 01, 2024 pm 06:25 PM
Taobao ialah perisian membeli-belah dalam talian yang biasa digunakan untuk ramai rakan Anda biasanya membuat pesanan dan membeli banyak perkara daripada Taobao Ia menyediakan pengguna dengan fungsi peringatan sampul merah, jadi cepat dan semak bahasa Cina laman web. Senarai langkah untuk mematikan peringatan sampul merah pada Taobao 1. Buka pusat peribadi APP Taobao dan pilih butang [Tetapan] untuk memasuki halaman. 2. Cari pilihan [Pemberitahuan Mesej] Di sini anda boleh memilih suis tekan mesej Cari mesej sampul merah dan matikan suis. 3. Atau anda boleh mematikan kebenaran pemberitahuan APP Taobao melalui halaman tetapan telefon mudah alih anda, supaya semua mesej daripada Taobao tidak akan memasuki tekan dan hanya boleh dilihat selepas menghidupkannya. 4. Pengguna boleh menetapkan jenis mesej yang mereka ingin terima, yang menjadikannya lebih mudah untuk digunakan.
Bagaimana untuk menyemak jumlah penggunaan di Taobao Bagaimana untuk menyemak jumlah penggunaan
Mar 12, 2024 pm 03:07 PM
Jika kita biasanya perlu melakukan membeli-belah dalam talian, kita semua akan memilih Taobao sebagai platform, yang boleh memenuhi sepenuhnya semua keperluan membeli-belah kita Ia mempunyai banyak sumber untuk pelbagai komoditi, dan terdapat semua jenis komoditi platform ini. Semua orang mendapati bahawa terdapat banyak kategori produk di sini, dan anda boleh memilihnya mengikut keperluan anda sendiri. Anda boleh membeli apa sahaja yang anda mahu, jadi semua orang pasti akan membelinya di sini harga produk ini sangat berbeza. Semua rekod membeli-belah ini boleh disimpan, yang boleh memudahkan semua orang menyemak pada bila-bila masa. Anda mesti sangat ingin tahu Ini adalah editor
Adakah bayaran balik sampul merah percuma 'Taobao' akan dikembalikan?
May 08, 2024 am 08:16 AM
Apabila membeli-belah di Taobao, kami sering menggunakan sampul merah percuma untuk menikmati diskaun. Tetapi jika kami memerlukan bayaran balik, adakah sampul merah percuma ini akan dikembalikan? Mari kita lihat jawapan kepada soalan ini. Adakah sampul merah percuma Taobao akan dikembalikan, bergantung pada situasi, apabila anda menerima sampul merah, sampul merah dalam keadaan pengaktifan belum selesai Sebelum menebus produk, sampul merah yang akan diaktifkan tidak diaktifkan dan tidak boleh digunakan buat sementara waktu. Anda akan menunggu sehingga penerimaan produk yang dibeli disahkan , sampul merah yang perlu diaktifkan boleh digunakan. Sekiranya terdapat masalah dengan produk selepas menggunakan sampul merah percuma dan ia perlu dipulangkan, maka pemulangan sampul merah tersebut perlu dinilai mengikut situasi sebenar: 1. Peraturan Bayaran Balik 11. Jika bayaran balik berlaku selepas sampul merah digunakan, sampul merah akan dikembalikan mengikut kadar. 2. Jika tidak tertunggak, tempoh penggunaan sampul merah yang dipulangkan adalah tempoh penggunaan asal Jika tertunggak, ia akan dikeluarkan dalam tempoh 7 hari.
