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

最新推荐文章于 2024-05-12 17:00:21 发布
最新推荐文章于 2024-05-12 17:00:21 发布
阅读量1.4k 收藏
点赞数
分类专栏： web 文章标签： html5 javascript css3
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_41271930/article/details/105690318
版权

简介

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

完整Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时展示当前时间</title>
</head>
<style>
    #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;
    }
</style>

<body>
    <div id="time"></div>
    <div id="time1"></div>
</body>
<script>
    /**
     * 简介：
     * 下面用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 (中国标准时间)
</script>

</html>

展示效果

在这里插入图片描述

介绍

技术点

  1. 定时器；
  2. 获取当前时间；
  3. 时间转换格式；
  4. 获取元素且展示；
  5. ES6；

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

Sun_小杰杰哇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JSP页面实时显示系统当前时间、前台验证码
qq_40302790的博客
07-22 799
<html> <head> <title></title> </head> <body> 当前时间：<span id="time"></span> </body> <script type="text/javascript"> ...
在JSP页面中获取当前日期时间的方法
10-21
综上所述，JSP页面中获取当前日期时间的方式有两种：一种是通过JavaScript，它在客户端执行，用户可见；另一种是通过Java，它在服务器端执行，通常用于后端逻辑处理。这两种方式各有优缺点，选择哪种取决于具体的...
页面获取当前系统时间
weixin_33777877的博客
08-04 284
window.onload = function(){ showTime(); //网页一加载就调用showTime()函数； } function checkTime(i){ //补位处理 if(i<10) { i="0"+i; //当秒分小于10时，在左边补0； } return i; ...
2024年前端最全vue 使用 moment 获取当前时间及一月前的时间(1)，2024年最新附Web前端面经
最新发布
2401_84447149的博客
05-12 437
/Mon Jul 06 2020 13:50:51 GMT+0800 (中国标准时间).subtract(30, “days”) 的意思是向前推30天，如果是1，就是向前推1天。**《350页前端校招面试题精编解析大全》**内容大纲主要包括。YYYY-MM-DD:HH:MM:SS 这个是时分秒的格式化。console.log(‘//获取-n小时’)console.log(‘//获取＋n月’)//其它几种格式化方法。//获取今天开始的时间。//获取今天结束的时间。//获取这个月初时间。
JS 实时获取当前时间
hexianfan的博客
11-10 233
JS 实时获取当前时间
如何实时获取当前时间
~牧马~
08-03 1664
如何实时获取当前时间 var date = new Date() date.getFullYear() //获取当前年份 2021年 date.getFullMonth() + 1 //获取当前月份，这里为何+1，因为它拿到的是上月的月份所以必须+1 8月 date.getDate() //获取- 今天是几号 3号 date.getDay() //获取- 当前是本月的第几周 周2 date.getTime() // 获取当前时间(从1970.1.1开始
实时时间显示
loneii的博客
06-08 2049
先来看一下代码部分 HTML部分就是一个div里面包裹两个button按钮（注意，button的type要设置为button值，不然button默认的是一个提交按钮）和两个b标签 Css就根据自己的喜欢，设置属性就行了 js部分的代码，就是通过绑定点击事件，绑定到button按钮，可以点击“开始”和“暂停”，然后声明一个变量，通过索引值，使得日期和时间在b标签显示。 还有要注意的是，因为时间和日期在显示个位数的时候，就单单的只有一位数，因此，在这里要做一个判断，判断月、日、时、分、...
js获取当前时间显示在页面上并每秒刷新
10-25
在JavaScript中，获取当前时间并在页面上实时更新是一项常见的任务，尤其在构建动态网页时非常有用。本示例提供了一种简单的方法来实现这一功能，通过JavaScript的内置Date对象和DOM操作来完成。以下是详细解释： 1...
Vue 中获取当前时间并实时刷新的实现代码
11-20
dealWithTime(data) { // 获取当前时间 let formatDateTime; let Y = data.getFullYear(); let M = data.getMonth() + 1; let D = data.getDate(); let H = data.getHours(); let Min = data.getMinutes(); ...
jsp实现页面实时显示当前系统时间的方法
10-26
在网页设计中，有时我们需要在页面上实时展示服务器的当前时间，这有助于用户了解系统状态或者作为时间戳来追踪操作。本篇文章将介绍如何通过JavaServer Pages (JSP) 技术来实现这一功能，虽然这里提供的代码示例...
实时显示时间
maximeete的博客
12-23 3623
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&
CSS+JS注册页面+显示当前时间
06-18
CSS+JS注册页面+显示当前时间 用css和js编写的看看吧
网页中显示动态日期时间代码
11-10
网页中显示动态日期时间代码，可以在网页中自动与计算机的日期和时间一致的代码。
获取实时刷新 当前时间
weixin_44727080的博客
05-06 275
第一步：在deta 里面声明两个变量 第二步：把时间调用写在created() 生命周期里面，进入页面就需要调用 第三步：离开页面使用beforeDestroy() 销毁 data() { return { timer: "",//定义一个定时器的变量 currentTime: new Date(), // 获取当前时间 }; }, created() { var _this = this; //声明一个变量指向Vue实例this，保证作用域.
PHP 实例 - AJAX 实时搜索
编辑编辑器
03-17 256
PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好、交互性更强的搜索体验。 AJAX Live Search 在下面的实例中，我们将演示一个实时的搜索，在您键入数据的同时即可得到搜索结果。 实时的搜索与传统的搜索相比，具有很多优势： 当键入数据时，就会显示出匹配的结果 当继续键入数据时，对结果进行过滤 如果结果太少，删除字符就可以获得更宽的范围 在下面的文本框中输入 “HTML”，搜索包含 HTML 的页面： 上面实例中的结果在一个 XML 文件（links.xml）中进行查找。为
前端页面，如何获取当前系统时间，并且在页面展示
一天不写代码难受的博客
03-05 3554
目录html页面代码 html页面代码 <script type="text/javascript"> Date.prototype.format = function (fmt) { var o = { "y+": this.getFullYear, //年 "M+": this.getMonth() + 1, //月份 "d+": this.getDate(),
【HTML】获取当前时间并显示在网页上
热门推荐
点滴记忆
12-01 1万+
首先在页面中我们直接写一个标签，然后给标签定义一个id， 这里我们用什么标签都可以，我们就用<span></span>演示吧， 代码如下： <span id="clock" ></span> <script type="text/javascript"> var clock = new Clock(); ...
【博客美化】公告栏显示个性时间
weixin_30245867的博客
07-11 147
设置侧边公告栏显示个性化时间 效果图： <div id="myTime"> 　　<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve...
CSS中的时间
歪脖先生的博客
11-29 1170
CSS中的时间，主要用来指定语言元素的延迟、动画或过渡的延迟、动画或过渡的持续时间等。时间不能为负值。 时间可以表示为秒（s），也可以表示为毫秒（ms）。秒和毫秒之间可以进行换算，换算公式为 1s = 1000ms。因此，0.1s 和 100ms 是等价的。
高级点的实现在页面上实时展示当前系统时间
06-11
2.使用JavaScript获取当前时间，并将其显示在页面上。可以使用setInterval()函数每秒钟更新一次时间。 ``` function updateTime() { var now = new Date(); var hours = now.getHours(); var minutes = now....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值