[JavaScript] 实时显示本地时间

最新推荐文章于 2023-04-05 17:47:45 发布
最新推荐文章于 2023-04-05 17:47:45 发布
阅读量434 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/missa_deng/article/details/110005722
版权 
function doShowTime(){
		
		var vShowTime = new Date();
		var vYear = vShowTime.getFullYear();
		var vMonth = vShowTime.getMonth()+1;
		var vDate= vShowTime.getDate();

		var vHours = vShowTime.getHours();
		var vMinutes = vShowTime.getMinutes();
		var vSeconds = vShowTime.getSeconds();

		var tShowTime = vYear + "年" + vMonth + "月" + vDate+ "日";
		tShowTime = tShowTime + vHours + "时" + vMinutes + "分" + vSeconds + "秒";

		$("showTime").innerHTML = tShowTime;
		t=setTimeout(function(){doShowTime()},1000);
	}

<body onload="doShowTime()">
	<div ID="showTime">此处显示时间</div>
</body>

今天实验了一下在网页上实时显示本地时间。
遇到的几个问题（感觉把能踩到的坑全都踩了一遍 Ծ‸Ծ）：

显示效果如下：
在这里插入图片描述

1、收获了报错：vDay.getTime is not a function;
原因：重复定义：用 vDay 定义了 new Date()，然后又用 vDay 重新定义了 vDay.getDate()；

2、用 getMonth() 获取的月份，比实际少一个月。
原因：月份为 0-11：所以实际显示的时候应该加上1。

3、用 getDay() 获取的日期不正确。
原因： 获取日期应为 getDate()，getDay() 返回的是当周第几天。

4、onload 写在 div 上不起作用。
原因：onload 仅支持放在 body, img, iframe

重新完善了一下：

t=setInterval(function doShowTime(){
		
		var vShowTime = new Date();
		var vMonth = vShowTime.getMonth()+1;
		var vWeek = "星期"+ ["日", "一", "二", "三", "四", "五", "六"][new Date().getDay()];
		var vMinute = vShowTime.getMinutes()<10 ? "0"+ vShowTime.getMinutes() : vShowTime.getMinutes();
		var vSecond = vShowTime.getSeconds()<10 ? "0"+ vShowTime.getSeconds() : vShowTime.getSeconds();

		var tShowTime = vShowTime.getFullYear() + "年" + vMonth + "月" + vShowTime.getDate() + "日    ";
		tShowTime = tShowTime +  vWeek;
		tShowTime = tShowTime + "  " + vShowTime.getHours() + ":" + vMinute + ":" + vSecond;

		$("showTime").innerHTML = tShowTime;

	},1000);

在这里插入图片描述

兔兔没有尾巴
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JavaScript显示当前时间
weak1003的博客
05-29 143
本次实现js国庆倒计时小案例 开发工具与关键技术：Visual Studio 2015 JavaScript 当然 首先还是先写出大概布局如下图： 在对其添加 背景样式 和两个按钮的样式 下面便是我的css 样式了 这样再到类中添加JavaScript 代码便可如下图： 首先便是获取各项的div 而后 声明一个 分别获取本地时 分 秒， 然后使其更美观 所以使用了个三元运算判获取的本地时间小于 10的时候就在前面加一个0的操作 如果大于十那将不变 而后 在获取的shijian里使
1.11 JavaScript 常用库：日期（北京时间、当地时间）
最新发布
一个字，学
05-10 410
返回值为整数的API，数值为1970-1-1 00:00:00 UTC（世界标准时间）到某个时刻所经过的毫秒数：与Date对象的实例相关的API：
Js实现实时显示系统时间（获取当前时间并显示）
琅枫的博客
04-19 4万+
js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法： 获取当前时间： var d = new Date();//获取系统当前时间 获取特定格式的时间： 1、获取当前年份 getYear()方法：可以获取年份（2位或4位），其返回值是表示当前Date 对象的年份字段 说明：当年
JavaScript：简单输出时间
NXBBC的博客
01-26 2564
function getDate() { var weeks = new Array('日', '一', '二', '三', '四', '五', '六'); var data = new Date(); var year = data.getFullYear(); //年 var month = data.getMonth() + 1; //月 var day = data.getDate(); //日 var week = data.getDay(); //星期几，一般输出为0~6，对应星期.
js显示当前系统的时间
廖圣平
06-14 1091
http://www.jb51.net/article/75711.htm
JS自动走的时钟【定时器】
FF_Chen的博客
09-12 759
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="pD.
JavaScript实现同步于本地时间的动态时间显示方法
10-24
首先，我们的基本目标是创建一个简单的JavaScript代码，它能够获取并显示客户端的本地时间，并且能够实时更新。这个功能的核心在于使用`Date`对象和定时器`setInterval`。 1. **Date对象**：在JavaScript中，`Date`...
用javascript自动显示最后更新时间
10-30
如果你希望显示用户本地时间，可以直接使用`new Date()`构造函数获取当前时间，而无需依赖`document.lastModified`。 此外，为了增强用户体验，你还可以考虑定期刷新更新时间，例如每分钟更新一次。这可以通过使用...
javaScript实现世界各地时间显示
10-14
需要注意的是，JavaScript的`Date`对象默认处理的是本地时间，所以需要通过计算时区差来获取其他地区的时间。在本例中，我们使用了固定的时区偏移量，但实际应用中可能需要更复杂的逻辑，例如考虑夏令时等因素。 ...
javascript显示动态时间的方法汇总
10-18
在本文中，我们将探讨三种JavaScript实现动态显示时间的方法，这些方法可以帮助开发者在网页上实时更新当前时间。 1. 第一种方法： 这种方法通过创建一个函数`changetime()`来实现。首先，获取一个具有ID ...
纯JavaScript实现实时反馈系统时间
10-19
在本文中，我们将深入探讨如何使用纯JavaScript实现实时反馈系统时间。JavaScript是一种广泛用于网页开发的编程语言，它可以与HTML DOM（文档对象模型）紧密结合，动态更新网页内容。在这个例子中，我们的目标是创建...
在页面动态显示本地时间
qq_41942413的博客
09-06 447
1.想实现本地动态显示时间：就要页面一直调用函数来获取本机上的时间，所以就要使用定时器（setintval函数）每个一秒刷新一下。 1.1在实现效果之前，要了解一下setInterval（)这个函数：setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭，函数...
总结：如何在网页上动态显示当前系统时间？
飞翔的企鹅的博客
10-26 5818
先贴上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--在页面上定义一个标签用于显示时间 --> ...
js获取当前时间
热门推荐
mfxcyh的博客
08-31 7万+
如果有一个需求，需要将当前日期格式化为yyyy-MM-dd hh:mm:ss。
通过JS实现动态显示当前时间的一个简单方法（三步到位！）
weixin_43426379的博客
04-05 943
三步到位！通过JS实现动态显示当前时间的一个超级简单方法
javascript利用Date()格式化转换年月日时分秒
David的博客
09-13 6388
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
显示本地时间
xhsvwf的博客
06-28 278
今天写的要写的，是获取本地时间，然后在页面上显示。过程会比较简单。 写一个p标签，再给它写上样式 然后就是js部分的内容，要先写一个方法来获取到本地的时间。 在这个方法里面，首先要获取到计算机的时间，再获取本地时间的年、月、日、时、分、秒。下面图片是我用到的方法 我们还要注意的一点就是获取星期几的时候 var mouth=date.getMonth()+1; 这里后面加一是因为获取周几的时候是从零开始的，星期一时，而获取的值是零， 所以我们这里需要加一个1就能跟现在...
怎样在html中显示时间,如何在网页上显示当前时间
weixin_28223453的博客
06-09 7374
最近做的页面中有需要在页面直接显示当前时间的功能，一开始不知道怎么实现，后来经过查找资料来实现了该功能。虽然用过该功能的人会觉得很简单，但是在这里还是想总结出来，可以供不熟悉的人参考一下。具体实现代码如下：　//font属性用来设置字体属性function getDate(){var d = new Date();var year = d.getFullYear();var month = d.g...
js实现实时的时间显示
weixin_45719052的博客
06-14 4928
在页面里动态显示日期与时间 1.小时按12小时制，不足两位的前面补0 2.根据获取的时间，判断上下午，用am，pm表示 js代码 觉得有用的话就点个赞吧
JavaScript动态时间显示与类型探讨：null与对象
在JavaScript中，"动态显示时间-JavaScript技术应用"这个主题主要探讨如何利用JavaScript编程语言实现实时更新的时间显示功能。该技术通常用于网页开发，提升用户体验，比如计时器、日期选择器等。 核心代码片段...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值