创建一个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部分:
*{
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>
