原文:一些有用的javascript实例分析(二)

 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[n].className="";
//指定标题样式改变,this指代oLi[i]
this.className="current";
}
for(var n=0;n<oUl.length;n++){
//所有的内容都不显示(实现无缝)
oUl[n].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()
}
}
}

一些有用的javascript实例分析(二)的更多相关文章

  1. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

  2. 一些有用的javascript实例分析(一)

    原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...

  3. MapReduce多种join实现实例分析(二)

    上一篇<MapReduce多种join实现实例分析(一)>,大家可以点击回顾该篇文章.本文是MapReduce系列第二篇. 一.在Map端进行连接使用场景:一张表十分小.一张表很大.用法: ...

  4. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  5. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  6. linux驱动由浅入深系列:高通sensor架构实例分析之二(驱动代码结构)【转】

    本文转载自:https://blog.csdn.net/radianceblau/article/details/73498303 本系列导航: linux驱动由浅入深系列:高通sensor架构实例分 ...

  7. [转载]JavaScript内存分析

    https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...

  8. Linux Kernel PANIC(三)--Soft Panic/Oops调试及实例分析【转】

    转自:https://blog.csdn.net/gatieme/article/details/73715860 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  9. Python中的单继承与多继承实例分析

    Python中的单继承与多继承实例分析 本文实例讲述了Python中的单继承与多继承.分享给大家供大家参考,具体如下: 单继承 一.介绍 Python 同样支持类的继承,如果一种语言不支持继承,类就没 ...

随机推荐

  1. Java Tread多线程(0)一个简单的多线程实例

    作者 : 卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/39341887 本文演示,一个简单的多线程实例,并简单分析一下线程. 编程多 ...

  2. Directx11学习笔记【二十】 使用DirectX Tool Kit加载mesh

    本文由zhangbaochong原创,转载请注明出处:http://www.cnblogs.com/zhangbaochong/p/5788482.html 现在directx已经不再支持.x文件了, ...

  3. 基于ICSharpCode.SharpZipLib.Zip的压缩解压缩

    原文:基于ICSharpCode.SharpZipLib.Zip的压缩解压缩 今天记压缩解压缩的使用,是基于开源项目ICSharpCode.SharpZipLib.Zip的使用. 一.压缩: /// ...

  4. Java Swing 绝对布局管理方法,null布局(转)

    首先把相关容器的布局方式设为 setLayout(null); 然后调用组件的  setBounds() 方法 设置button的位置为(100,100) 长宽分别为 60,25 jButton.se ...

  5. rac安装grid报INS-41112错误

    原创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  6. 认识Require

    1. 加载require.js文件 <script type="text/javascript" src="js/require.js" data-mai ...

  7. 21个js 技巧收藏

    1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...

  8. 处理FTP上传成功推理

    #登录FTPserver获取指定文件 #$1:server住址 #$2:帐户 #$3:password #$4:文件路径名 #$5:本地文件路径名 #$6:本地文件名 #比量ftp上传结果: #获取上 ...

  9. Nginx + IIS

    Nginx + IIS 配置,实现负载均衡   当你的Web应用程序访问量大的时候,一台服务器可能会因为压力过大而无法处理所有的请求.此时,可以增加服务器,采用负载均衡来分担所有的请求.关于Nginx ...

  10. 有关Struts2a的ction直接使用response异步问题

    假设我们在项目中使用struts2,正在使用ajax而通信时后端程序.为简单起见,我们经常使用下面的方法:         ActionContext ac = ActionContext.getCo ...