JavaScript技巧：确认对话框、页面事件与DOM操作
需积分: 10 128 浏览量
更新于2024-09-09
收藏 182KB DOCX 举报
"这篇资料主要总结了JavaScript在网页交互中的几个关键应用，包括弹出确认对话框、监听浏览器关闭事件、设置文字滚动效果、调整元素位置、为元素赋值、页面加载时初始化样式以及刷新页面的方法。"
在JavaScript中，我们可以利用`onclick`事件和`confirm()`函数来实现JSP中点击链接弹出确认对话框的功能。当用户点击链接时，会弹出一个带有“确定”和“取消”选项的对话框。如果用户点击“确定”，则通过`location.href`跳转到指定的JSP处理页面；如果点击“取消”，则通过`return false`阻止默认的链接行为，使用户留在当前页面。示例代码如下：
```html
<a href="#" onclick="javascript:if(confirm('是否继续?')) location.href='要到的页面路径'; else return false;">点击链接</a>
```
接着，我们关注的是如何使用JavaScript监听浏览器关闭事件。`window.onbeforeunload`事件可以在用户尝试离开页面时触发，通常用于提示用户确认是否真的要离开。以下是一个简单的例子：
```html
<script type="text/javascript">
window.onbeforeunload = function() {
return "the page will be closed, confirm to close?";
}
</script>
```
这段代码会在用户尝试关闭窗口时显示一个提示消息。
对于设置字体浮动的效果，可以使用`<marquee>`标签配合其属性来实现。例如，`scrollAmount`控制滚动速度，`direction`决定滚动方向。以下是一个简单的例子：
```html
<marquee style="width:200px;" onmouseover="this.stop()" onmouseout="this.start()" scrollAmount=1 direction="up" height="99%">欢迎您进入……</marquee>
```
要设置元素距离顶部的高度，可以通过CSS的`position`、`top`属性实现，如下所示：
```html
<div align="center" style="position: relative; top: 80px; width: 90px; border: 0; cellspacing: 0; cellpadding: 0;">
您查询的信息不存在。
</div>
```
给某个元素赋值，可以使用`getElementById`获取元素并修改其`innerHTML`属性：
```html
<div id="dv"></div>
<script>
document.getElementById("dv").innerHTML = '由于您查询的结果数量过多，请您输入完整的信息重新查询';
</script>
```
当跳转到新的页面并希望初始化某些样式时，可以在`body`标签的`onload`事件中设置：
```html
<body onload="fn.onload()">
<script>
function fn.onload() {
document.body.style.backgroundRepeat = "repeat-x";
document.body.style.backgroundImage = "none";
}
</script>
</body>
```
刷新当前页面，可以使用`window.location.href`重新赋值，如下所示：
```javascript
var url = '<%=path%>/ent/entAction!query.dhtml';
window.location.href = url;
```
若要实现条件语句判断后不执行后续语句，可以使用`return`语句提前终止函数执行：
```javascript
if (condition) {
// do something
return; // 阻止执行下面的语句
}
// 下面的语句将不会执行
```
最后，刷新父页面可以使用`window.parent.location.reload()`，但请注意，这需要在iframe或被嵌套的页面中使用，因为`window.parent`引用了父级窗口。
这些是JavaScript在网页交互中的一些基本操作，它们在创建动态和响应式的用户体验中起着至关重要的作用。
1.JSP 中点击链接弹出确定取消选择对话框，点确定跳入到 JSP 处理页面,点取消留在当前页面？怎么写？
<a href="#" onclick="javascript:if conrm('是否继续?') locaon.href='要到的页面路径' else return
false;">
2. JS 监听关闭浏览器事件
关键字: js 监听关闭浏览器事件
只监控(×)
<script type="text/javascript">
funcon window.onbeforeunload()
{
event.returnValue = "the page will be closed, comrm to close?";
}</script>
3.设置字体浮动
<marquee style="width:200px;" onmouseover=this.stop() onmouseout=this.start() scrollAmount=1
direcon=up height="99%">欢迎您进入……</marquee>
scrollAmount:代表速度
4.设置据顶部高度
<div align="center" style="position:relative; top:80px;" width="90"
border="0" cellspacing="0" cellpadding="0">
您查询的信息不存在...................
</div>
5.给某个元素赋值
document.getElementById("dv").innerHTML = '由于您查询的结果数量过多，请您
输入完整的信息重新查询';
<div id=”dv”></div>
6.当跳到另一个页面时，初始化这个页面的某些样式
<body onload="fnonload()">
function fnonload() {
// document.body.style.backgroundRepeat="repeat-x"
document.body.style.backgroundImage="none";｝北京图片设为空
7.刷新当前页面
var url = '<%=path %>/ent/entAction!query.dhtml';
window.location.href=url;
下载后可阅读完整内容，剩余3页未读，立即下载
2009-04-08 上传
2019-04-25 上传
2009-08-07 上传
2019-06-01 上传
2012-12-14 上传
2015-06-01 上传
2016-01-10 上传
2021-03-23 上传
2021-05-15 上传
zxt_go
- 粉丝: 0
- 资源: 2
我的内容管理
展开
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析：酒店管理系统快速开发指南
- 构建可解析文本框：.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋：从游戏到复刻
- WordPress文档嵌入插件：无需浏览器插件即可上传和显示文档
- Android开源项目精选：优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅：横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器：高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录
