您的位置：首页 > Web前端 > JavaScript
一些有用的javascript实例分析(二)

2014-05-10 19:45 218 查看
5 求出数组中所有数字的和
window.onload = function ()
{
var oBtn = document.getElementsByTagName("button")[0];
var oInput = document.getElementsByTagName("input")[0]
var oStrong = document.getElementsByTagName("strong")[0];
oInput.onkeyup=function(){
//用空白替换非数字和逗号
this.value=this.value.replace(/[^(\d)|(,)]/,"");
};
oBtn.onclick=function(){
var sum=0;
//将输入的值以逗号为分隔符，转化为字符数组
var oInput=document.getElementsByTagName("input")[0].value.split(",")
for(var i in oInput){
//把字符型转化为整型
sum=parseInt(oInput[i]);
}
};
oStrong.innerHTML=sum;
}

6 简易选项卡
window.onload = function ()
{   //获取标题
var oLi = document.getElementById("tab").getElementsByTagName("li");
//获取内容
var oUl = document.getElementById("content").getElementsByTagName("ul");
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
//滑动到指定标题
oLi[i].onmouseover = function (){
for(var n=0;n<oLi.length;n++){
//首先使所有标题样式都不变
oLi
.className="";
//指定标题样式改变，this指代oLi[i]
this.className="current";
}
for(var n=0;n<oUl.length;n++){
//所有的内容都不显示(实现无缝)
oUl
.style.display="";
//指定标题对应的内容显示
oUl[this.index].style.display="block"
}

}
}
}

div id="outer">
<ul id="tab">
<li class="current">第一课</li>
<li>第二课</li>
<li>第三课</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>网页特效原理分析</li>
<li>响应用户操作</li>
</ul>
<ul>
<li>戛纳印象效果</li>
<li>数组</li>
<li>字符串连接</li>
</ul>
<ul>
<li>JavaScript组成：ECMA来源</li>
<li>JavaScript出现的位置、优缺点</li>
</ul>
</div>
</div>
</body>

7 单一按钮显示/隐藏
window.onload = function ()
{
var oH2 = document.getElementsByTagName("h2")[0];
var oUl = document.getElementsByTagName("ul")[0];
oH2.onclick=function(){
var style=oUl.style;
//内容在显示和隐藏之间切换
style.display=style.display=="none"?"block":"none";
//标题栏的图标随下拉框的改变而改变（background-position）
oH2.className=style.display=="none"?"open":""
}
<body>
<div id="outer">
<h2>播放列表...</h2>
<ul>
<li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
<li><a href="javascript:;">原谅我就是 - 戴佩妮</a></li>
</ul>
</div>
</body>

8鼠标移过，改变图片路径
window.onload = function ()
{
var oImg = document.getElementById("box").getElementsByTagName("img");
var oDiv = document.getElementsByTagName("div")[0];
for(var i=0;i<oImg.length;i++){
oImg[i].onmouseover=function(){
//在目标div中创建一个图像对象
var img=new Image();
//用big替换创建图像的small，赋值给第一幅大图，然后赋值给创建图像
img.src=oImg[0].src=this.src.replace(/small/,"big");
}
}
<body>
<ul id="box">
<li class="first"><img src="img/big_1.jpg"><div></div></li>
<li><a href="javascript:;"><img src="img/small_1.jpg"></a></li>
<li><a href="javascript:;"><img src="img/small_2.jpg"></a></li>
</ul>
</body>

9 复选框（checkbox）全选/全不选/返选
window.onload = function ()
{
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll=function(){
//i=0是全选框状态，n记录选中的个数
for(var i=1,n=0;i<oInput.length;i++){
//若此选框选中执行&&后面的，即个数加1.没选中不加
oInput[i].checked&&n++;
}
//先执行判断选中个数，得到一个布尔值赋给全选框
oInput[0].checked=n==oInput.length-1;
//根据布尔值（1全选，0未全选）来判断是否已经全选
oLabel.innerHTML=oInput[0].checked?"全不选":"全选"
}
//全选/全不选
oInput[0].onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{//确定每个复选框的状态和oInput[0](this指代)的状态一致
oInput[i].checked = this.checked
}
isCheckAll()
};
//反选
oA.onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked
}
isCheckAll()
};

//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++)
{
oInput[i].onclick = function ()
{//每选中一个复选框判断一次
isCheckAll()
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航