例题三、图片轮播

<body>

<div style="width:1000px; height:250px; margin-top:30px">

　　<img src="img/11.jpg" width="1000" height="250" />

　　<img src="img/22.png" width="1000" height="250" style="display:none" />

　　<img src="img/33.png" width="1000" height="250" style="display:none" />

　　<img src="img/44.png" width="1000" height="250" style="display:none" />

</div>

</body>

<script type="text/javascript">

window.setInterval("Huan()",2000);

//找到图片的最大索引

var n = document.getElementsByTagName("img").length-1;

//存当前图片的索引

var d =0;

//换图

function Huan()

{

　　var attr = document.getElementsByTagName("img");//找到所有图片

　　d++;//当前索引加1

　　if(d>n)//判断索引是否超出范围

　　{

　　　　d = 0;

　　}

　　for(var i=0;i<=n;i++)//换图

　　{

　　　　attr[i].style.display = "none";//让所有隐藏

　　}

　　attr[d].style.display = "block";//让该索引的显示

}

</script>

例题四、选项卡效果

<style type="text/css">

*{ margin:0px auto; padding:0px}

#menu{ width:240px; height:30px;}

.list{ width:60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}

.list:hover{ cursor: pointer}

.nr{ width:240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}

</style>

</head>

<body>

<div style="width:700px; height:500px; margin-top:30px">

　　<div id="menu">

　　　　<div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>

　　　　<div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>

　　　　<div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>

　　　　<div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>

　　</div>

　　<div id="d1" class="nr" style="background-color:#3C0">娱乐新闻</div>

　　<div id="d2" class="nr" style="background-color:#399; display:none">社会新闻</div> //隐藏

　　<div id="d3" class="nr" style="background-color:#F30; display:none">体育新闻</div> //隐藏

　　<div id="d4" class="nr" style="background-color:#CF3; display:none">军事新闻</div> //隐藏

</div>

</body>

<script type="text/javascript">

function Show(id)//鼠标点击执行

{

　　var attr = document.getElementsByClassName("nr");//隐藏所有

　　for(var i=0;i<attr.length;i++)

　　{

　　　　attr[i].style.display = "none";

　　}

　　document.getElementById(id).style.display = "block";//显示当前的

}

</script>

五、滑动效果

<style type="text/css">

*{ margin:0px auto; padding:0px}

#left{ height:600px; background-color:#63C; float:left}

#right{ height:600px; background-color:#F33; float:left}

#btn{ width:30px; height:30px; background-color:#FFF; position:relative; top:285px; color:#60F; font-weight:bold; text-align:center; line-height:30px; vertical-align:middle; float:left}

#btn:hover{ cursor:pointer}

</style>

</head>

<body>

<div style="width:1000px; height:600px">

　　<div id="left" style="width:200px;">

　　<div id="btn" onclick="Bian()" style="left:185px;">-></div>

</div>

<div id="right" style="width:800px;"></div>

</body>

<script type="text/javascript">

function Bian()//点击->时执行Bian循环

{

　　Dong();//执行Dong循环

}

function Dong()//循环dong的作用是改变大小和位置

{

　　var d1 = document.getElementById("left");//找到id为left的元素

　　var d2 = document.getElementById("right");

　　var btn = document.getElementById("btn");

　　//左侧DIV变宽

　　var yskd1 = d1.style.width;

　　var w1 = yskd1.substr(0,yskd1.length-2);

　　var w1 = parseInt(w1)+2;

　　d1.style.width = w1+"px";

　　//右侧DIV变窄

　　var yskd2 = d2.style.width;

　　var w2 = yskd2.substr(0,yskd2.length-2);

　　var w2 = parseInt(w2)-2;

　　d2.style.width = w2+"px";

　　//将按钮移动

　　var ysjl = btn.style.left;

　　var w3 = ysjl.substr(0,ysjl.length-2);

　　var w3 = parseInt(w3)+2;

　　btn.style.left = w3+"px";

　　if(w2>200)

　　{

　　　　//自己调自己

　　　　window.setTimeout("Dong()",1);

　　}

}

</script>

例题六、进度条的制作

<style type="text/css">

*{ margin:0px auto; padding:0px}

#wai{ width:200px; height:10px; border:1px solid #60F;}

#nei{ width:0px; height:10px; background-color:#F33; float:left}

</style>

</head>

<body>

<div style="width:600px; height:300px; margin-top:30px">

　　<div id="wai"></div>

　　<div id="nei"></div>

<input type="button" value="开始" onclick="Start()" />

</div>

</body>

<script type="text/javascript">

function Start()

{

　　Bian();

}

var bfb = 0;

function Bian()

{

　　//将百分比变化

　　bfb= bfb+1;

　　//改变宽度

　　document.getElementById("nei").style.width = bfb+"%";

　　//判断

　　if(bfb<100)

　　{

　　　　window.setTimeout("Bian()",50);

　　}

}

</script>

JS之document例题讲解2的更多相关文章

  1. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  2. JS function document.onclick(){}报错Syntax error on token "function", delete this token

    JS function document.onclick(){}报错Syntax error on token "function", delete this token func ...

  3. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  4. JS 中document.URL 和 window.location.href 的区别

    实际上,document 和 window 这两个对象的区别已经包含了这个问题的答案. document 表示的是一个文档对象,window 表示一个窗口对象. 一个窗口下面可以有很多的documen ...

  5. 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下     ...

  6. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  7. JS的document.links函数使用示例

    ? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...

  8. JS的document.images函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS的document.anchors函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Martin Fowler关于IOC和DI的文章（中文版）

    IoC容器和Dependency Injection模式 Martin Fowler 编者语:最近研究IoC,在网上搜索到很多网页推荐阅读Martin Fowler的一片名叫Inversion of  ...

  2. Java中I/O流之缓冲流

    Java 中的缓冲流: 1. 缓冲流要“套接”在相应的节点流之上,对读写的数据提供了缓冲的功能,提高了读写的效率,同时增加了一些新的方法(带缓冲区的,显著减少对 IO 的读写次数,保护硬盘). 2. ...

  3. [Redis]在Windows下的下载及安装

    1.下载 下载地址: https://github.com/MSOpenTech/redis, 下载并解压到特定的目录. 2.启动Redis服务端 CMD -> redis-server.exe ...

  4. 主流 Kubernetes 发行版梳理

    2014 年,Kubernetes 作为内部 Google orchestrator Borg 开源版本推出,目前已是最成功和发展最快的 IT 基础架构项目之一.2018 年,Kubernetes 已 ...

  5. Codeforces Round #524 Div. 2 翻车记

    A:签到.room里有一个用for写的,hack了一发1e8 1,结果用了大概600+ms跑过去了.惨绝人寰. #include<iostream> #include<cstdio& ...

  6. hdu 3030 Increasing Speed Limits (离散化+树状数组+DP思想)

    Increasing Speed Limits Time Limit: 2000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  7. C# 跨服务大文件复制

    跨服务的大文件复制,肯定要和本地大文件复制一样,分多次传递,要不然内存也承受不了,下面就说下如何实现大文件的跨服务复制······ 首先肯定要建立一个WCF的服务以及对应的客户端来测试服务,此方法请参 ...

  8. NetScaler + Wireshark = A Perfect Combination!

    NetScaler + Wireshark = A Perfect Combination! https://www.citrix.com/blogs/2014/05/03/netscaler-wir ...

  9. [洛谷P3878][TJOI2010]分金币

    题目大意:把$n(n\leqslant30)$个数分成两组,两组个数最多相差$1$,求出两组元素差的绝对值最小使多少 题解:模拟退火 卡点:$\exp$中的两个数相减写反,导致$\exp(x)$中的$ ...

  10. POJ2828：Buy Tickets——题解

    http://poj.org/problem?id=2828 首先发现如果我们按照他的方法模拟的话,势必时间爆炸. 所以我们从后往前推,因为我们知道最后一个的位置一定是对的,而前面的位置可以从后面推知 ...