css3获取当前时间并显示,实时获取当前时间并展示在页面上

简介

实时获取当前时间并展示在页面上，是很多地方常用的；在页面中做此展示以便查看时间。本文使用js通过一个小的demo实现效果。

完整Code

实时展示当前时间

#time {

width: 60%;

padding: 10px;

border-radius: 6px;

background-color: lightcoral;

color: white;

}

#time1 {

width: 60%;

padding: 10px;

border-radius: 6px;

background-color: lightcoral;

color: white;

margin-top: 30px;

}

/**

* 简介：

* 下面用js简单的实现在页面中实时展示当前的时间；

let time = new Date();

setInterval(() => {

time = new Date();

document.getElementById('time').innerHTML = `标准时间：${time}`; // 标准时间：Wed Apr 22 2020 18:53:43 GMT+0800 (中国标准时间)

document.getElementById('time1').innerHTML = `转化后的时间：${time.toLocaleDateString()} ${time.toLocaleTimeString()}`; // 转化后的时间：2020/4/22 下午6:54:25

}, 1000)

document.getElementById('time').innerHTML = `标准时间：${time}`;

document.getElementById('time1').innerHTML = `转化后的时间：${time.toLocaleDateString()} ${time.toLocaleTimeString()}`

console.log(new Date()); // Wed Apr 22 2020 18:53:21 GMT+0800 (中国标准时间)

展示效果

介绍

技术点

定时器；

获取当前时间；

时间转换格式；

获取元素且展示；

ES6；

后续未完,请继续关注,Thanks!☺

css3获取当前时间并显示,实时获取当前时间并展示在页面上相关推荐

android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
最新微信小程序获取音频时长与实时获取播放进度
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
c51单片机万年历模拟，12864LCD屏显示实时温度与时间
前言 c51单片机万年历模拟期末作品,用到了温度传感模块及12864液晶显示模块及矩阵键盘模块及复位电路,电源模块,晶振模块,可在12864屏上显示实时温度与时间,本人自己做的期末作品,仅供同学们研究 ...
php 获取鼠标的坐标,如何实时获取鼠标的当前坐标-
本文来做一个简单的实时获取鼠标坐标的功能,在canvas动画开发中,获取鼠标的坐标,键盘的按键等等,都是常用的操作,我们就慢慢得把他们封装成一个公共库. 一.事件的兼容:function bindEv ...
计算机设置系统日期的命令是,电脑时间怎么显示星期_电脑时间怎么命令
2016-11-22 11:36:37 控制面板",双击"区域与语言选项"图标,然后,在弹出的设置窗口中点击"区域选项中找到"日期"标签,在 ...
android获取小程序音频时长,微信小程序获取音频时长与实时获取播放进度
首先在没有播放音频之前,居然拿不到总时长但是在播放之后也需要设置setTimeout来获取所以在监听音频播放进度更新事件中获取.顺便获取当前播放进度按照官方的写法 audioPlayed: fu ...
django自定义模板标签，通过键获取字典的值，屏蔽姓名等隐蔽信息并调用展示到页面上
1.在web开发中,经常会说要屏蔽某些字眼,用*来屏蔽客户比较隐蔽的信息,如身份证,姓名,手机号等等,当然,如果安全性做得好一点的会加密身份证后存入数据库,如果没有的话,直接取出来,页面要展示的时候, ...
linux获取互联网时间,linux中用shell获取时间,日期
linux中用shell获取昨天.明天或多天前的日期: 在Linux中对man date -d 参数说的比较模糊,以下举例进一步说明: # -d, --date=STRING display time ...
ajax实时获取股票信息,Ajax学习笔记03-模拟动态显示股票信息动态变化的小例子...
模拟实现一个动态显示股票价格的经典例子: 实体类 :Stock.java 由于篇幅问题,此处省略了get Set 方法 /** * Created by IntelliJ IDEA. * User: ...

css3获取当前时间并显示,实时获取当前时间并展示在页面上

css3获取当前时间并显示,实时获取当前时间并展示在页面上相关推荐

最新文章

热门文章