例题三、图片轮播

<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. WinForm连续点击按钮只打开一次窗体

    许多朋友,学习C#时,制作WinForm小程序总会有一个问题,如果我们在父窗体设置的是点击一个按钮,打开一个子窗体,连续点击总会连续出现一样窗体,可是我们有时只想打开一次窗体,怎么办? 呵呵,我来方法 ...

  2. 3dContactPointAnnotationTool开发日志（十五）

      有时候拖动一个窗口的时候可能直接拖出去了那就再也拖不回来只能reset重新来过:   于是开了个类成员变量在start里记录了一下panel的位置: var lp = panel.GetCompo ...

  3. Chromium之工程类别

    虽然有700多个project,其实有很多是不成声二进制执行文件的,他们主要是调用cygwin的环境,执行一些python的脚本. 具体这个.py文件做了哪些共工作,还要再研究,目前看到有打包一些.p ...

  4. java 基础 --匿名内部类-008

    不全代码 interface Inter(){void show();} class Outer{补全代码} class OuterDemo{ public static void main(Stri ...

  5. MongoDB、ElasticSearch、Redis、HBase这四种热门数据库的优缺点及应用场景

    MongoDB MongoDB是当今最火爆的NoSQL数据库.MongoDB最早在09年发布,算得上是早期大数据时代的数据库代表作了.随着MongoDB的火爆,研发MongoDB的团队还专门成立了Mo ...

  6. BIO、NIO、AIO通信机制

    一.BIO的理解 首先我们通过通信模型图来熟悉下BIO的服务端通信模型:采用BIO通信模型的服务端,通常由一个独立的Acceptor线程负责监听客户端的连接,它接收到客户端的连接请求之后为每个客户端创 ...

  7. Foundation框架—时间处理对象NSDate

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. NSDate的构造方法和构造获取实例的属性 用于创建NSDat ...

  8. NetScaler + Wireshark = A Perfect Combination!

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

  9. 生成模型（Generative Model）Vs 判别模型（Discriminative Model）

      概率图分为有向图(bayesian network)与无向图(markov random filed).在概率图上可以建立生成模型或判别模型.有向图多为生成模型,无向图多为判别模型. 判别模型(D ...

  10. CF#508 1038E Maximum Matching

    ---题面--- 题解: 感觉还是比较妙的,复杂度看上去很高(其实也很高),但是因为n只有100,所以还是可以过的. 考虑一个很暴力的状态f[i][j][x][y]表示考虑取区间i ~ j的方格,左右 ...