动态显示时间资源-CSDN文库

需积分: 50 42 浏览量 2012-12-22 15:29:08 上传评论收藏 3KB TXT 举报

动态显示时间是网页开发中一个常见且实用的功能，它能够实时地向用户展示当前的时间，增强网站的互动性和用户体验。本文将深入解析一种利用JavaScript实现动态时间显示的方法，包括倒计时和当前时间的实时更新。 ### 倒计时功能解析在代码片段中，我们首先看到的是一个倒计时功能的实现。该功能通过设置目标日期（`targetDate`），然后与当前时间（`now`）进行比较，计算出两者之间的时间差（`plus`），并将其转换为天、小时、分钟和秒的形式进行显示。 #### 关键步骤 1. **获取目标日期**：通过`document.getElementById("target").value`获取页面上输入框中的目标日期。 2. **时间转换**：将字符串格式的目标日期转换为`Date`对象，便于进行时间计算。 3. **计算时间差**：通过`taget.getTime()-now.getTime()`计算目标日期与当前日期之间的毫秒差值。 4. **时间单位转换**：将毫秒差值转换为天、小时、分钟和秒，分别存储在`day`、`hour`、`minute`和`second`变量中。 5. **动态更新显示**：使用`document.getElementById("p").innerHTML`更新页面上的元素，显示倒计时信息。 6. **定时器调用**：通过`setInterval(setTimer,1000);`每秒钟调用一次`setTimer`函数，实现倒计时的实时更新。 ### 实时时间显示功能除了倒计时，代码还实现了当前时间的实时显示。这一部分通过获取当前的日期和时间，然后格式化并显示在页面上。 #### 关键步骤 1. **获取当前时间**：通过`new Date()`创建一个新的`Date`对象，表示当前时间。 2. **提取时间成分**：从`Date`对象中分别提取年、月、日、小时、分钟和秒，使用`getFullYear()`、`getMonth()`、`getDate()`、`getHours()`、`getMinutes()`和`getSeconds()`方法。 3. **格式化时间**：对小时、分钟、秒进行格式化处理，确保单个数字前面有零（如09:08:07）。 4. **显示时间**：使用`document.getElementById('nowDateTimeSpan').innerHTML`更新页面上的元素，显示当前时间。 5. **定时器调用**：同样使用`setTimeout('startTime()',1000);`每秒钟调用一次`startTime`函数，确保时间的实时更新。 ### 总结动态显示时间不仅增强了网站的互动性，还提升了用户体验。通过上述分析，我们可以看到JavaScript提供了强大的时间处理功能，结合HTML和CSS，可以轻松实现实时时间和倒计时的显示。这对于各种在线应用，如直播预告、活动倒计时等场景，具有重要的实际应用价值。开发者可以根据具体需求调整代码，例如改变样式、增加动画效果或与其他功能集成，以满足不同的设计和功能需求。

资源推荐

资源详情

资源评论

<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页未读，立即下载

评论收藏

内容反馈