JavaScript代码技巧:iframe、元素隐藏、时间显示与轮播图实现
"本文主要介绍了JavaScript在网页控制方面的应用,包括如何通过JavaScript操作IFrame、隐藏元素、设置定时器以及实现简单的图片轮播效果。" JavaScript是一种广泛应用于Web开发的脚本语言,它可以直接在浏览器中运行,为用户提供动态交互体验。在网页控制方面,JavaScript扮演着至关重要的角色。以下是对给定内容中各知识点的详细说明: 1. **IFrame高度自适应**: `<iframe>`标签用于在HTML文档中嵌入另一个HTML页面。在示例代码中,`id="iFrame1"` 的IFrame设置了`onload`事件,当页面加载完成后,通过`this.height=iFrame1.document.body.scrollHeight`将IFrame的高度设置为其内容的实际高度,确保内容完全显示。 2. **点击链接隐藏元素**: 使用`<a>`标签创建了一个链接,同时设置了`onclick`事件。当用户点击这个链接时,通过`document.getElementById("id").style.display="none"`将指定ID的元素隐藏。请注意,这里的"id"应替换为实际元素的ID。 3. **定时更新时间**: 通过`setInterval`函数,每1000毫秒(1秒)执行一次指定的函数。函数内容是更新一个ID为`timesm`的元素,将其内容设置为当前日期和星期几。`newDate().toLocaleString()`返回本地化的日期字符串,`'һ'.charAt(newDate().getDay())`获取当前日期是一周中的第几天,转换为字符。 4. **图片轮播**: 这段代码展示了如何用JavaScript实现一个简单的图片轮播。`<div id="demo">`是轮播容器,设置了`overflow:hidden`以隐藏超出边界的图片。`<table>`中的`<td>`包含了一系列的图片链接。通过JavaScript,可以实现这些图片的自动切换或手动切换效果。然而,具体的轮播逻辑(如切换间隔、动画效果等)并未在给出的代码中实现,需要额外的JavaScript代码来补充。 这些示例涵盖了JavaScript在网页控制方面的基本用法,包括DOM操作、事件处理和定时任务。通过结合CSS和JavaScript,可以构建丰富的交互式网页应用。在实际开发中,还需要考虑到兼容性、性能优化以及用户体验等因素。
自适应高度:<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="first.htm"></iframe>
2.
关闭某个有ID的:对象<a href="src" onclick="document.getElementById("对象的id").style.display"="none" /></a>
3.
时间秒针跳动:<script>setInterval("timesm.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>
4.
无缝循环滚动图片1
<div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr><td valign=top bgcolor=ffffff id=marquePic1>
<table width='100%' border='0' cellspacing='0'>
<tr>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>01</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>02</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>03</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>04</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>05</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>06</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>07</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>08</a></td>
<td align=center><a href='#'><img src="logo1.gif" width=120 height=80 border=0><br><br>09</a></td>
</tr>
</table>
</td>
<td id=marquePic2 valign=top></td></tr>
</table></div>
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展