Java JSP 实现网页倒计时加载

5星 · 超过95%的资源需积分: 14 85 浏览量更新于2024-09-22 收藏 950B TXT 举报

"本文将介绍如何在JSP页面中实现倒计时加载效果，通过JavaScript进行实时更新，并在页面加载11秒后自动重定向至2.jsp页面。" 在Web开发中，有时我们需要在页面加载过程中显示一个倒计时，以告知用户页面即将跳转或完成加载。在给定的JSP页面代码中，我们看到了一个简单的倒计时功能的实现。以下是对这个功能的详细解释： 1. **获取当前时间**：在JavaScript中，`new Date()` 创建了一个新的Date对象，它表示当前的日期和时间。`getTime()` 方法返回该日期对象距离1970年1月1日00:00:00 UTC的毫秒数。这个值被存储在`clockStart` 变量中，作为倒计时的起点。 2. **倒计时显示**： `initStopwatch()` 函数计算从页面加载到当前时刻的时间差（以毫秒为单位），并将其转换为秒数。`getTime()` 方法用于获取当前时间，然后与`clockStart`做差得到`timeDiff`。接着，`timeDiff/1000` 将毫秒转换为秒。 3. **JavaScript定时器**：使用 `setTimeout()` 函数，每秒钟执行一次 `getSecs()` 函数。`getSecs()` 函数负责更新倒计时显示。它首先调用 `initStopwatch()` 获取剩余秒数，然后将结果格式化为两位数的字符串，并显示在页面的输入框`timespent` 中。 4. **页面重定向**：在HTML的 `<meta>` 标签中，`http-equiv="refresh"` 属性设置了页面自动刷新的机制。`content="11;url=2.jsp"` 表示页面将在11秒后重定向到2.jsp。这样，在倒计时结束后，用户将被自动带到新的页面。 5. **页面结构**：页面包含一个简单的HTML结构，包括 `<html>`, `<head>`, `<body>` 和 `<center>` 标签。`<form>` 标签内的 `<input>` 元素用于显示倒计时的秒数。`onLoad` 事件在页面加载完成后启动倒计时。这段代码展示了如何在JSP页面上实现一个简单的倒计时加载效果，通过JavaScript进行实时更新，并在倒计时结束时自动重定向到其他页面。这个技术在等待页面加载、处理异步操作或模拟加载动画等场景中非常有用。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>标题页</title>
<meta http-equiv="refresh" content="11; url=2.jsp">
<script language="JavaScript">
//获取当前时间
startday=new Date();
clockStart=startday.getTime();
function initStopwatch(){
var myTime=new Date();
var timeNow=myTime.getTime();
var timeDiff=timeNow-clockStart;//获取间隔时间
this.diffSecs=timeDiff/1000; //时间以毫秒为单位
return(this.diffSecs);
}
function getSecs(){
var mySecs=initStopwatch();
var mySecs1=""+mySecs;
//以倒计时方式显示时间
mySecs1=10-eval(mySecs1.substring(0, mySecs1.indexOf(".")))+" 秒";
document.form1.timespent.value=mySecs1;
window.setTimeout('getSecs()',1000);
}
</script>
</head>
<body bgcolor="#ffffff" onLoad="window.setTimeout('getSecs()',1)">
<center>
10秒后加载页面：

下载后可阅读完整内容，剩余1页未读，立即下载

Babary

粉丝: 0
资源: 4

Java JSP 实现网页倒计时加载

纯jsp实现的倒计时动态显示效果完整代码

jquery+jsp 倒计时页面

JSP中的倒数计时和自动跳转页面

jsp简单的漂浮倒计时

倒计时转发

jquery倒计时器

在jsp页面中实现跳转的方式分享

自定义Button实现倒计时验证码发送

网页跳转与倒计时实现技巧

Java实现的CountDowntimerDome倒计时圆顶功能

最新资源