例题三、图片轮播

<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. freefcw/hustoj Install Guide

    First of all, this version hustoj is a skin and improved for https://code.google.com/p/hustoj/. So t ...

  2. SQLite - Python

    SQLite - Python 安装 SQLite3 可使用 sqlite3 模块与 Python 进行集成.sqlite3 模块是由 Gerhard Haring 编写的.它提供了一个与 PEP 2 ...

  3. Unsupported major.minor version 52.

    面试的时候,京东和美团,360的面试官都问到了同一个问题,java1.7与java1.8的区别, 于是想做个小小的例子: 我的eclipse刚开始是1.7的,后来,我把环境改成了1.8的, 方法:右击 ...

  4. 第二章 IoC

    什么是IoC 如何配置IOC Bean的生命周期 多环境配置 条件化配置Bean 什么是IOC? IOC有两层含义, 1.控制反转:将对象实例的创建与销毁的权限交给Spring容器管理,而不再是调用对 ...

  5. 转：狄利克雷过程（dirichlet process ）的五种理解

    狄利克雷过程(dirichlet process )的五种理解  原文:http://blog.csdn.net/xianlingmao/article/details/7342837   无参数贝叶 ...

  6. 【题解】JXOI2017颜色

    一眼线段树...显然,我们可以考虑最后所留下的区间,那显然这个区间中应当不能存在任何与区间外相同的颜色.这里的转化也是很常用的,我们用 \(nxt[i]\) 表示与 \(i\) 颜色相同的下一个位置在 ...

  7. [HAOI2006]受欢迎的牛 tarjan缩点 + 拓扑排序

    ---题面--- 题解: 首先tarjan缩点应该还是容易想到的,因为喜爱具有传递性,所以一个强联通分量里面的点实际上是全部等效的,所以我们可以缩成一个方便判断, 缩完点之后整张图就变成了一个有向无环 ...

  8. BZOJ2820：YY的GCD——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2820 Description 神犇YY虐完数论后给傻×kAc出了一题给定N, M,求1<=x& ...

  9. HDOJ.1342 Lotto （DFS）

    Lotto [从零开始DFS(0)] 点我挑战题目 从零开始DFS HDOJ.1342 Lotto [从零开始DFS(0)] - DFS思想与框架/双重DFS HDOJ.1010 Tempter of ...

  10. [BZOJ1131/POI2008]Sta树的深度

    Description 给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 Input 给出一个数字N,代表有N个点.N<=1000000 下面N-1条边. Output ...