首页 > 编程笔记 > JavaScript笔记 > JS面向对象编程
阅读:49
JS显示当前时间
Date 是 JavaScript 原生的时间管理对象,通过它提供的大量方法和函数可以创建时间对象,获取时间信息,如年、月、日、时、分、秒等,也可以设置时间信息。
本例设计一个当前时间显示,先使用 new Date() 创建一个现在时间对象,然后使用 get 为前缀时间读取方法,分别获取现在时的年、月、日、时、分、秒等信息,最后通过定时器设置每秒执行一次,实现实时更新。
2) 因为平时看到的时间格式一般是 00:00:01,而 getHours()、getMinutes()、getSeconds() 方法得到格式是 0 到 9,而不是 00 到 09 这样的格式。所以在从 9 变成 10的过程中,从一位数变成两位数,同样再从 59秒变为 0 秒,或者 59 分变为 0 分,或者 23 时变为 0 时。例如:23:59:59 的下一秒应该为 00:00:00 ,实际为 0:0:0,这样格式上就不统一,在视觉上也是数字突然增加,或突然减少,产生一种晃动的感觉。
下面定义一个辅助函数,把一位数字的时间改为两位数字显示。
3) 在页面中添加一个标签,设置 id 的值。
4) 为标签绑定定时器,在定时器中设置每秒钟调用一次时间显示函数。
本例设计一个当前时间显示,先使用 new Date() 创建一个现在时间对象,然后使用 get 为前缀时间读取方法,分别获取现在时的年、月、日、时、分、秒等信息,最后通过定时器设置每秒执行一次,实现实时更新。
【操作步骤】
1) 设计时间显示函数,在这个函数中先创建 Date 对象,获取当前时间,然后分别获取年份、月份、日份、时、分、秒等信息,最后组装成一个时间字符串并返回。var showtime = function () { var nowdate = new Date(); var year = nowdate.getFullYear(), month = nowdate.getMonth() + 1, date = nowdate.getDate(), day = nowdate.getDay(), week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], h = nowdate.getHours(), m = nowdate.getMinutes(), s = nowdate.getSeconds(), h = checkTime(h), m = checkTime(m), s = checkTime(s); return year + "年" + month + "月" + date + "日" + week[day] + " " + h +":" + m + ":" + s; }
2) 因为平时看到的时间格式一般是 00:00:01,而 getHours()、getMinutes()、getSeconds() 方法得到格式是 0 到 9,而不是 00 到 09 这样的格式。所以在从 9 变成 10的过程中,从一位数变成两位数,同样再从 59秒变为 0 秒,或者 59 分变为 0 分,或者 23 时变为 0 时。例如:23:59:59 的下一秒应该为 00:00:00 ,实际为 0:0:0,这样格式上就不统一,在视觉上也是数字突然增加,或突然减少,产生一种晃动的感觉。
下面定义一个辅助函数,把一位数字的时间改为两位数字显示。
var checkTime = function (i) { if (i < 10) { i = "0" + i; } return i; }
3) 在页面中添加一个标签,设置 id 的值。
<h1 id="showtime"></h1>
4) 为标签绑定定时器,在定时器中设置每秒钟调用一次时间显示函数。
var div = document.getElementById("showtime"); setInterval (function() { div.innerHTML = showtime(); }, 1000); //反复执行函数显示结果如下:
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频