javascript代码集锦

本人学校除名，自学成才。下面是自学整理的JS实用代码。

• 点击隐藏/显示单个层

实现原理：onclick的时候document.getElementById(“idname”).style.display = “none”;

[coolcode]

显示

隐藏[/coolcode]

• 点击显示层/隐藏其他层

实现原理：以序列数字命名作为ID的关键字。设定一个带参数的函数clickHideShow(x)，添加一个for循环语句，x作为当前ID，y作为非当前ID，循环遍历y,如果y不等于x(即非当前ID),则设置样式.style.display = “none”，如果相等，则显示层。在函数中另加触发器的ID，利用x参数设置innerHtml内容，或者样式等。

[coolcode]

显示隐藏层

[/coolcode]

显示随机图片

实现原理：以数字命名的几张图片，如”1.jpg”,”2.jpg”,”3.jpg”,利用Math.random()取0-1随机数（Math.random()*（n-m)+m可返回m-n的指定范围的数字），再利用Math.round()返回整数，指定给图片的src属性。

[coolcode]

[/coolcode]

Tab选项卡

实现原理：以序列数字命名ID层，给各个点击按钮添加一个函数，并将数字作为参数，然后遍历ID，如果参数与层ID不符，则设置层不可见，同时设置点击按钮（文字）CSS非当前状态，如果参数与层ID相等，则设置层可见，同时给点击按钮（文字）设置当前状态的.className

[coolcode]

//JS代码

function caiDan(id,num){

for (var bianLi=0;bianLi { document.getElementById(“page”+bianLi).style.display = “none”;

document.getElementById(“link”+bianLi).className = “”;

document.getElementById(“page”+id).style.display = “block”;

document.getElementById(“link”+id).className = “currect”;

}

}

/*CSS代码*/

ul,a{ text-decoration:none;

list-style:none;}

ul li{float:left;

padding:5px;

margin:0 10px;}

ul,li:hover{ text-decoration:none;

list-style:none;

background-color:#9CF;}

.currect{

background:#009;}

.currect a{

color:#fff;}

div{

display:none;}

//HTML代码

• 链接0
• 链接1
• 链接2
• 链接3

---

[/coolcode]

表格隔行变色

实现原理：document.getElementsByTagName（“tagName”)可返回多个tag的数组，document.getElementsByTagName（“tagName”).lenght即总数目，利用for循环，可以指定偶数行（除以2等于0）的style属性,奇数行（else)另外的style属性。

[coolcode]

名 字	详 情
Name1	details1
Name2	details2
Name3	details3
Name4	details4

[/coolcode]

JS历史上一页，下一页

实现原理：调用history参数

[coolcode]

上一页浏览


下一页浏览页面

[/coolcode]