例题三、图片轮播

<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. DAY4敏捷冲刺

    站立式会议 工作安排 (1)服务器配置 已完成对微信小程序登录凭证储存至云端数据库,计划使用微信接口返回的session_id进行转化返回本地,以保持登录态. (2)数据库配置 单词学习记录+用户信息 ...

  2. Web界面和Winform界面生成，代码生成工具

    在上面一篇随笔<代码生成工具之界面快速生成>介绍了代码生成工具Database2Sharp的界面生成操作,其中介绍了Web界面(包括列表界面.内容显示.内容编辑界面的生成,另外还介绍了Wi ...

  3. loadrunner如何监控windows系统的资源

    1.测试客户端与服务器之间的网络,保证通信畅通 2.开启服务器端Windows中的如下两个服务,可见系统服务中查找,cmd输入:services.msc 如下图: Remote Registry需改为 ...

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

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

  5. VS05错误：部署WEB文件失败

    直接生成一个空项目就不存在这个问题了.

  6. html5 download all in one

    html5 download all in one HTML5 download & Fetch API & File API & Blob https://scarletsk ...

  7. [ZJOI2011]最小割 & [CQOI2016]不同的最小割 分治求最小割

    题面: [ZJOI2011]最小割 [CQOI2016]不同的最小割 题解: 其实这两道是同一道题.... 最小割是用的dinic,不同的最小割是用的isap 其实都是分治求最小割 简单讲讲思路吧 就 ...

  8. POJ1990：MooFest——题解

    http://poj.org/problem?id=1990 题目大意:定义一对在树轴上的点,每对点产生的值为两点权值最大值*两点距离,求点对值和. 显然n*n复杂度不行,我们需要用树状数组维护两个东 ...

  9. POJ1816：Wild Words——题解

    http://poj.org/problem?id=1816 比较麻烦的trie. 首先你需要选择针对n还是m建立trie,这里我选择了针对n. 那么就需要面临卡空间的问题. 这里提供了一种链式前向星 ...

  10. BZOJ2565：最长双回文串——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2565 题目大意: 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(ab ...