JavaScript动态显示当前时间

前端写项目时, 有时会需要获取当前时间, 虽然使用度不高, 难免有需要的时候.

下面整理获取当前时间代码思路

使用 new Date() 获取 当前时间的时间戳

getFullYear(): 时间戳转换的年份
getMonth() + 1: 月份
getDate(): 日期
getHours()
getMinutes()
getSeconds()

根据需要获取相应的时间类型

var showTime = document.querySelector('.showTime');
const date = new Date();
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
// const year = date.getFullYear();
// const month = date.getMonth() + 1;
// const day = date.getDate();
// showTime.innerHTML = (`${year} : ${month} : ${day}`);
// showTime.innerHTML = (`${date.toLocaleString()}`);   //"1995/12/17 上午3:24:00"
showTime.innerHTML = `${date.toDateString()}--${hour} : ${minutes} : ${seconds}`  // "Sun Dec 17 1995"

其中含有方法快速获取固定类型的年月日时间类型

toLocaleString(): "1995/12/17 上午3:24:00"
toDateString(): "Sun Dec 17 1995"

获取DOM元素, 在元素中使用拼接, 通过innerHTML/innerText 写入元素, 显示在页面上

动态显示时间

使用setTimeout()定时器, 否则只是显示渲染页面的当前时间

var t = null;
//添加定时器, 开始运行
t = setTimeout(time, 1000);
function time() {//清除定时器clearTimeout(t);//获取时间, 定义要显示的类型...//设定定时器, 循环运行t = setTimeout(time, 1000);
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>当前时间</title><style>*{margin: 0;padding: 0;background-color: #000;}.container{width: 100vw;height: calc(100vh);}.showTime{color: aqua;font-size: 100px;width: 100%;margin: auto;text-align: center;line-height: calc(100vh);}</style>
</head>
<body><div class="container"><div class="showTime"></div></div><script>var t = null;t = setTimeout(time, 1000);function time() {clearTimeout(t);var showTime = document.querySelector('.showTime');const date = new Date();const hour = date.getHours();const minutes = date.getMinutes();const seconds = date.getSeconds();showTime.innerHTML = `${date.toDateString()}--${hour} : ${minutes} : ${seconds}`t = setTimeout(time, 1000);}          </script></body>
</html>

实现页面显示也可以通过document.write()直接写入在标签内部

JavaScript动态显示当前时间相关推荐

【JavaScript】动态显示当前时间
可以实现动态显示当前时间,年月日时分秒星期几等,用12小时制表示,并能根据时间显示am(上午),pm(下午). 文章目录一.基础知识二.动态显示系统当前时间 1.代码 2.展现效果一.基础知识 ...
jsp页面动态显示本地时间
jsp页面动态显示本地时间 <script language="javascript"> //检查是不是两位数字,不足补全 function check(str){st ...
pyqt5动态显示当前时间
动态显示当前时间 QTimer QThread from PyQt5.QtWidgets import QWidget, QPushButton, QApplication, QGridLayout, ...
JS实现动态显示当前时间(12/24小时制)(转载Mr.Think)
今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧. 很简单的一个功能函数,实现方式不 ...
javascript 等待指定时间_javascript的单线程和任务队列
一.JavaScript为什么设计为单线程? JavaScript语言的一大特点就是单线程,换言之就是同一个时间只能做一件事.其他任务都必须在后面排队等待. for(var i = 0; i < ...
通过javascript动态显示界面控件
通过javascript动态显示界面控件作者: zyf0808 发表日期: 2006-03-30 08:47 文章属性: 原创复制链接 <script language="java ...
JavaScript，css时间计时器
JavaScript,css时间计时器 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
javascript获取当前时间后按规定样式输出
javascript获取当前时间后按规定样式输出方法一: dateFMT(new Date()); function dateFMT(date){var y = date.getFullYear() ...
JAVASCRIPT 取得当前时间，包括农历时间时间格式：2011年11月8日 16:54 星期二农历辛卯年(兔) 十月十三申时...
JAVASCRIPT 取得当前时间,包括农历时间时间格式:2011年11月8日 16:54 星期二农历辛卯年(兔) 十月十三申时写成了一个Js包(附件里)里了,直接调用函数就行测试代码: & ...

JavaScript动态显示当前时间

动态显示时间

JavaScript动态显示当前时间相关推荐

最新文章

热门文章