js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间,在使用innerHTM方法显示。

首先我们来了解一下js获取当前时间所需的一些方法:

获取当前时间:

var d = new Date();//获取系统当前时间

获取特定格式的时间:

1、获取当前年份
getYear()方法:可以获取年份(2位或4位),其返回值是表示当前Date 对象的年份字段

说明:当年份介于 1900 与 1999 之间时,getYear() 方法返回仅有两位数字的值;当年份在1900 之前或 1999 之后时,则可能返回 4 位数字的值。例:

var d = new Date();console.log(d.getYear());var born = new Date("1983");console.log(born.getYear());


注:getYear()方法无法获取完整的年份,且在ECMAScript v3 开始,就被getFullYear() 方法取而代之,不怎么被使用了。

getFullYear() 方法:可以获取当前一个完整的年份(4位数字,1970-???)。例:

var d = new Date();console.log(d.getFullYear());var born = new Date("1983");console.log(born.getFullYear());


2、获取当前月份

getMonth():可以获取本地时间的月份。

注:getMonth()方法返回的值是从0(表示1月)开始,到11(表示12月)结束的一个整数,即0~11之间的一个整数;如果想要获取和当前时间相同的月份,可在getMonth()方法返回的值后加1。例:

var d=new Date();console.log(d.getMonth());console.log(d.getMonth()+1);


3、获取当前天数

getDate() :可以返回一个月份的某一天,使用本地时间;返回值是 在1 ~ 31 之间的一个整数。例

var d = new Date();console.log(d.getDate())var d = new Date(“July 21, 1983”);console.log(d.getDate())


4、获取当前时间

getHours():获取小时数,返回的小时数值是从0到23之间的整数

getMinutes():获取分钟数,返回的分钟数值是从0到59之间的整数

getSeconds():获取秒数,返回的秒数值是从0到59之间的整数

例:获取当前时间

var d = new Date();var hour= d.getHours();//得到小时数var minute= d.getMinutes();//得到分钟数var second= d.getSeconds();//得到秒数

js获取当前时间并显示示例:

html+css代码

<style type="text/css">
.time span{display: inline-block;width: 40px;height: 20px;
}
</style>
<div class="time">當前時間:<br /><br /><span id="y"></span_id>年<span id="mo"></span_id>月<span id="d"></span_id>日<span id="h"></span_id>時<span id="m"></span_id>分<span id="s"></span_id>秒<span id="time">1</span_id>//調用show()函數
</div>

js代码:

function show(){var now = new Date();var year = now.getFullYear(); //得到年份var month = now.getMonth()+1;//得到月份var date = now.getDate();//得到日期// var day = now.getDay();//得到周几var hour= now.getHours();//得到小时数var minute= now.getMinutes();//得到分钟数var second= now.getSeconds();//得到秒数document.getElementById("y").innerHTML=year;document.getElementById("mo").innerHTML=month;document.getElementById("s").innerHTML=date;document.getElementById("h").innerHTML=hour;document.getElementById("m").innerHTML=minute;document.getElementById("s").innerHTML=second;setTimeout(show,1000);//定时器一直调用show()函数return "";}

第二种:用JS实现实时显示系统时间
参考:https://blog.csdn.net/qq_36190858/article/details/86152204?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-4&spm=1001.2101.3001.4242
代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JS时间</title><style></style></head><body><div id="time"></div><script type="text/javascript">function time() {var vWeek, vWeek_s, vDay;vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];var date =  new Date();year = date.getFullYear();month = date.getMonth() + 1;day = date.getDate();hours = date.getHours();minutes = date.getMinutes();seconds = date.getSeconds();vWeek_s = date.getDay();document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];};setInterval("time()", 1000);</script></body></html>

效果图如下:

Js实现实时显示系统时间(获取当前时间并显示)相关推荐

  1. c 当前计算机时间格式,C# 当前系统时间获取及时间格式详解

    搜索热词 C# 当前系统时间获取及时间格式 最近学习C# 的知识,对获取系统时间和时间格式进行了总结,这是本文在网上整理的详细资料,大家看下! --DateTime 数字型 System.DateTi ...

  2. c#获取当前时间 毫秒_C# 当前系统时间获取及时间格式详解

    C# 当前系统时间获取及时间格式 最近学习C# 的知识,对获取系统时间和时间格式进行了总结,这是本文在网上整理的详细资料,大家看下! --DateTime 数字型 System.DateTime cu ...

  3. linux系统gettime获取的时间,clock_gettime获取系统时间

    clock_gettime获取系统时间 clock_gettime()是基于Linux C语言的时间函数,他可以用于计算精度和纳秒. 需要包含头文件 #include函数原型为 int clock_g ...

  4. JS备忘--子父页面获取元素属性、显示时间,iframe之间互相调用函数

    //页面加载完成后执行$(function() { getHW();});//当用户改变浏览器大小改变时触发$(window).resize(function() { setHW(); });//每5 ...

  5. openwrt 显示系统运行时间和空闲时间

    http://blog.csdn.net/jk110333/article/details/18443453 在Linux中,我们常常会使用到uptime命令去看看系统的运行时间,它与一个文件有关,就 ...

  6. android微信头像无显示,canvas用arc画圆安卓显示问题,获取微信头像不显示问题...

    代码如下: onLoad(options) { const height = app.globalData.window_height; const width = app.globalData.wi ...

  7. linux循环显示系统时间,Ubuntu - shell脚本获取当前时间

    1. 系统当前时间 首先确认 Ubuntu 当前时间,可以在终端输入:date 输出如:Fri Oct 22 22:29:48 CST 2020 如果时间显示不是正确的时间,需要校正一下到当前时间:# ...

  8. 【MFC】显示系统时间的状态栏

    00. 目录 文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述 状态栏主要用于显示程序 ...

  9. js获取当前时间及一小时后时间

    js获取当前时间及一小时后时间 // 获取当前日期 时间 getNowFormatDate() {var date = new Date();return this.zeroPadd(date); } ...

  10. python获取服务器系统时间,Python datetime获取详细时间

    说明:datetime是date和time的结合体,包含了date和time的所有信息 datetime常见用法: 1.datetime.datetime.now()返回一个UTC时间的datetim ...

最新文章

  1. DX:ASPxGridView使用选择事件的前置条件
  2. paddle_ocr1.0入门踩坑
  3. hutool 读取扩展名文件_JPG,PNG,GIF,TIFF、SVG玩设计必须了解的文件格式你知道几个?...
  4. outlook邮箱限额满了
  5. 不同服务器数据库表连接查询修改,如何连接多个数据库,mysql中的服务器和查询两个表中的对方?...
  6. QML Profiler性能优化教程
  7. Unity Editor下改变场景里prefab的参数后保存时注意点
  8. beeline安装_hive使用beeline配置远程连接
  9. hadoop远程调试
  10. 队列queue中的常用函数
  11. python 命名风格_python 代码风格------------PEP8规则
  12. EDA技术实用教程 | 复习五 | 端口模式
  13. journalctl用法详解
  14. 计算机课程意见建议,对计算机课程的建议论文
  15. kafka如何创建topic
  16. linux乌班图图形化设置ip,在Ubuntu 18.04 Desktop图形中配置静态和动态IP地址的方法...
  17. DataPipeline选择MQ模式的理由
  18. 网络变压器 POE、POE+及UPOE+功能的概念和技术原理
  19. ThingsBoard 规则引擎-邮件通知
  20. 基于Zookeeper实现简易的负载均衡

热门文章

  1. Quest2有线串联steamVR
  2. 如何注册知乎小号,利用知乎一天引流超高转化精准粉
  3. php网站设计思路,PHP开发之网页留言板的思路及设计
  4. Twaver-HTML5基础学习(2)基本数据元素(Data)
  5. CSR8615 蓝牙4.0音响模块
  6. 小米神隐模式破解(反系统息屏后网络中断)
  7. lol官网服务器维修啥意思,英雄联盟5.6维护 lol官网服务器维护公告
  8. 2022-03-02 组建raft集群实战及日志复制与主从切换调研
  9. html document怎么转换成word,如何将HTML document文件类型转换成word document?
  10. Win10第二天开机后默认的pdf阅读器被自动修改成Microsoft Edge,三种解决办法(第三种办法适合本机情况,摸索半个月)