js获取现在时间_js中如何动态显示日期时间

js获取现在时间_js中如何动态显示日期时间js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear()、getMonth()、getDate()、getHours()等方法获取特定格式的时间,在使用innerHTM方法显示。首先我们来了解一下js获取当前时间所需的一些方法:获取当前时间:vard=newDate();//获取系统当前时间获取特定格式的时间:1、获取当前年份getYear()方法:可以获取年份(2位或4位),其返回值是表示当前Date对象的年份字

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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());

js获取现在时间_js中如何动态显示日期时间

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

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

var d = new Date();

console.log(d.getFullYear());

 

var born = new Date("1983");

console.log(born.getFullYear());

js获取现在时间_js中如何动态显示日期时间

2、获取当前月份

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

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

var d=new Date();

console.log(d.getMonth());

console.log(d.getMonth()+1);

js获取现在时间_js中如何动态显示日期时间

3、获取当前天数

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

var d = new Date();

console.log(d.getDate())

 

var d = new Date(“July 21, 1983”);

console.log(d.getDate())

 js获取现在时间_js中如何动态显示日期时间

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获取现在时间_js中如何动态显示日期时间

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193228.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 猴子摘香蕉问题python_硬币找零&&爬楼梯&&猴子摘香蕉「建议收藏」

    猴子摘香蕉问题python_硬币找零&&爬楼梯&&猴子摘香蕉「建议收藏」硬币找零&&爬楼梯&&猴子摘香蕉假设有几种硬币,如1、3、5,并且数量无限。请找出能够组成某个数目的找零所使用最少的硬币数。#include”CoinProblem.h”#includeintcountNum=MAX;voidCoinProblem(int*coin,intLength,intValue,intcount){if(Value==0){if(count…

  • docker重新部署项目_docker一键部署

    docker重新部署项目_docker一键部署Docker为什么出现?阿里云镜像加速、HelloWorld流程底层原理、部署项目1、安装docker2、安装Docker-Compose3、编写相关配置文件Docker-Compose.yml编写Dockerfile编写Nginx的配置4、打包前端后端Docker简介Docker为什么出现?一款产品:开发–上线两套环境!应用环境,应用配置!开发—运维。问题:我在我的电脑上可以运行!版本更新,导致服务不可用

    2022年10月18日
  • 有关XCode6(iOS8)UITableViewCell与iOS7在UITableViewCell问题

    有关XCode6(iOS8)UITableViewCell与iOS7在UITableViewCell问题

  • windows10系统下vue开发环境搭建

    windows10系统下vue开发环境搭建安装NodeJs下载地址:http://nodejs.cn/download/到官网下载自己系统对应的版本,按照推荐的方式默认安装,这里不再赘述。安装完成后,打卡powershell,执行命令node-v查询一下,检查是否正常安装。如果提示找不到node命令,添加node安装路径到系统环境变量,重启powershell,再试。如果你安装的是旧版本的npm,可以很容易得通过npm命令来升级。sudonpminstallnpm-g#linuxnpminstallnpm-g

    2022年10月20日
  • nginx 配置ssl

    nginx 配置sslnginx配置ssl

  • 小兔子跷跷板flash动画制作教程「建议收藏」

    小兔子跷跷板flash动画制作教程「建议收藏」 [1b]制作步骤:[/1b]  1、新建一个默认大小的Flash文档。先画天空背景,用矩形工具画一个矩形,在对齐面板中按下“相对于舞台”,再点“匹配宽和高”按钮,最后点“垂直中齐”和“水平中齐”按钮。与舞台对齐之后给矩形设置如下从白色到天蓝色的渐变,方式为“线性”。[img]/uploads/allimg/081209/2224570.jpg[/img] 图1   2、草…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号