JavaScript实现动态显示目标日期与剩余时间

动态显示时间

需积分: 50 3 下载量 190 浏览量更新于2024-09-13 收藏 3KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

试读

3页

动态显示时间是一种网页技术，通过JavaScript实现对目标日期的实时计时功能，常用于网站的倒计时或提醒功能。在这个示例代码中，主要包含以下几个关键知识点： 1. HTML结构： - 页面开始使用HTML标签 `<html>` 和 `<head>`，其中 `<title>` 标签设置了页面标题为“혻ж̬ʾϵͳʱ”，即“动态显示系统时间”。 2. JavaScript函数： - `setTimer` 函数是核心逻辑，负责动态更新显示的时间。首先，它获取用户输入的目标日期（`targetDate`），然后创建两个Date对象：`taget` 和 `now`，分别表示目标时间和当前时间。 - 接着，计算两个时间差 `plus`，并将其转换为天数（`varday`）、小时数（`varhour`）、分钟数（`varminute`）和秒数（`varsecond`）。 - 最后，将这些数值格式化为字符串，并插入到HTML元素（`<p id="p">...</p>`）中，显示剩余时间。 3. 定时器与调用： - 使用 `setInterval` 函数，每秒执行一次 `setTimer` 函数，确保时间持续更新。这表明该功能是一个实时运行的倒计时，直到目标日期达到。 4. 实时更新时间： - 除了倒计时，`startTime` 函数用于获取当前系统的日期和时间，包括年、月、日、小时、分钟和秒，这可能是用来初始化页面上显示的基础时间。 5. 语言和兼容性： - 代码中提到的 `<script language="JavaScript">`，虽然现在HTML5推荐使用 `type="application/javascript"`，但这里仍保留了旧版本的语法，确保跨浏览器兼容性。总结来说，这段代码展示了如何在Web页面上通过JavaScript实现一个动态显示剩余时间的功能，适用于各种需要实时计时的应用场景，如活动倒计时、赛事计时器等。同时，它还包含了获取和显示当前系统时间的基本JavaScript操作。

资源详情

资源推荐

<p id="p">距离2013/01/01年还剩000天0000时0000分0000秒</p>
02.<script type="text/javascript">
03. function setTimer(){
04. var targetDate = document.getElementById("target").value;
05. var taget = new Date(targetDate);
06. var now = new Date();
07. var plus = taget.getTime() - now.getTime();
08. var day = parseInt(plus/1000/60/60/24);
09. var hour = parseInt(plus/1000/60/60) - day * 24;
10. var minute = parseInt(plus/1000/60) - parseInt(plus/1000/60/60)*60;
11. var second = parseInt(plus/1000) - parseInt(plus/1000/60)*60;
12. document.getElementById("p").innerHTML = "距离"+targetDate+"还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
13. }
14. setInterval(setTimer,1000);
15.</script>

01.<html>
02. <head>
03. <title>网页中动态的显示系统日期时间</title>
04. <script language="JavaScript">
05. function startTime()
06. {
07. var today=new Date();//定义日期对象
08. var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
09. var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
10. var dd = today.getDate();//通过日期对象的getDate()方法返回年
11. var hh=today.getHours();//通过日期对象的getHours方法返回小时
12. var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟

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