創建一個9*9乘法表
<script>
//創建多維數組
var table=new Array(10);
for (var i=0;i<table.length;i++)
{
table[i]=new Array(10);
}
//初始化數組
for (var row=0;row<table.length ;row++ )
{
for (var col=0;col<table[row].length ;col++ )
{
table[row][col]=row*col;
}
}
console.log(table[7][9]); //輸出63
</script>
簡單寫一個關於切換和顯示,隱藏的事件,主要實現方法,利用javascript,首先通過遍歷給父級元素設置自定義屬性,屬性值一般為索引(0,1,2,3,,,,)
,我們通常可以簡單設置其屬性為id,屬性值為0,1,2,3,;然后通過onmouseover事件,促發function(),在function()下面,先得將事件對象的
屬性值賦值給我們設置的一個新變量(如何賦值很關鍵,這里用到this),將新變量作為要顯示內容的數組的索引,獲取對應顯示內容,將索引對應的顯示內容
display屬性設置為block;別忘了,在其設置為block之前,通過遍歷將所有要變化顯示內容的display屬性統統設置為none,使其隱藏!
css部分:
<style> *{ padding:0; margin:0;
} .container{ width:320px; height:100px; border:1px solid #333;
} div span{ padding:0; display:inline-block; width:23%; height:20px; text-align:center;
} #topNav{ height:20px; background:#998;
} #content span{ display:none;
} .container #content .active{ display:block;
}
</style> body部分: <body>
<div class="container">
<div id="topNav">
<span>html</span>
<span>css</span>
<span>javascript</span>
<span>vue</span>
</div>
<div id="content" style="background-color:#f00;height:80px;">
<span class="active">html</span>
<span>css</span>
<span>javascript</span>
<span>vue</span>
</div>
</div>
</body> js部分: <script>
var content1=document.getElementById("topNav").getElementsByTagName("span"); var content2=document.getElementById("content").getElementsByTagName("span"); var len=content1.length; var index=0; for(var i=0;i<len;i++){ content1[i].setAttribute("value",i); //在js中給對象設置自定義屬性value,其值為索引(多是為了綁定事件) content1[i].onmouseover=function(){ //通過鼠標懸浮事件來引發事件 index=this.getAttribute("value"); //給全局變量設置value屬性值,這里的this用法很常見
for(var j=0;j<len;j++){ content2[j].style.display="none"; //通過遍歷使所有變化對象都隱藏,后面再來將具體所需的顯示 } content2[index].style.display="block"; } } </script>
