js在页面显示当前时间

最新推荐文章于 2024-06-10 18:20:48 发布
最新推荐文章于 2024-06-10 18:20:48 发布
阅读量2.1w 收藏 26
点赞数 4
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38056893/article/details/79766369
版权

【JavaScript中Date对象的常用方法】

【步骤】

（1）先在body中设置页面加载事件：

	<body οnlοad="load()">
	</body>
（2）定义showRealTime(clock)函数，用于得到当前时间： 

<script type="text/javascript">
	function showRealTime(clock){
		var d = new Date();
		var year = d.getFullYear();
		var month = d.getMonth() + 1;
		var date = d.getDate();
		var days = new Array("日","一","二","三","四","五","六");
		var day = d.getDay();
		var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
		var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
		var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
		var now = year + "年" + month + "月" + date + "日<br>星期" + days[day] + "<br>" + hour + ":" + min + ":" + sec;
		clock.innerHTML = "现在的时间是：" + now;
	}
</script>

（3）在load()函数中每隔一秒调用一次showRealTime(clock)函数显示实时时间：

<script type="text/javascript">
	function load(){
		window.setInterval('showRealTime(clock)',1000);
	}
</script>

【代码】完整的代码如下： 

<html>
	<head>
		<title>实时时间</title>
	</head>
	<script type="text/javascript">
		function load(){
			window.setInterval('showRealTime(clock)',1000);
		}
	</script>
	<body οnlοad="load()">
		<div id="clock"></div>
		<script type="text/javascript">
			function showRealTime(clock){
				var d = new Date();
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var date = d.getDate();
				var days = new Array("日","一","二","三","四","五","六");
				var day = d.getDay();
				var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
				var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
				var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
				var now = year + "年" + month + "月" + date + "日<br>星期" + days[day] + "<br>" + hour + ":" + min + ":" + sec;
				clock.innerHTML = "现在的时间是：" + now;
			}
		</script>
	</body>
</html>


m0_38056893
关注
  • 4
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
用JS获取当前的时间
安宁的小虎牙
04-21 1万+
用JS获取当前时间与Date的基础讲解
js动态显示当前时间
m0_56713342的博客
11-12 939
【代码】js动态显示当前时间。
利用JS在网页上动态的显示当前的时间
weixin_75141231的博客
06-03 3273
【代码】利用JS在网页上动态的显示当前的时间。
JS实现各种日期操作方法汇总
最新发布
2401_85123473的博客
06-10 616
86400000);##本月第一天/***##本月最后一天/***##日期转时间戳/**##格式化当前时间/***##返回指定时间戳之间的时间间隔/**##按类型格式化日期/**let dateText = dateObj.getFullYear() + ‘年’ + (dateObj.getMonth() + 1) + ‘月’ + dateObj.getDate() + ‘日’;
JS在页面上显示当前日期和时间
Terry_Y
04-02 968
1、[color=blue]JS语句[/color]： [code="js"] setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1200); [/code] 2、[color=blue]在页面上添加如下内容[/color]：...
js实现动态获取系统时间，显示到页面上
热门推荐
yanghaitaohhh的专栏
07-31 2万+
获取系统时间 //获取系统时间。 var dateTime=new Date(); var hh=dateTime.getHours(); var mm=dateTime.getMinutes(); var ss=dateTime.getSeconds(); 显示时间到页面 //将时间显示到ID为time的位置，时间格式形如：19:18:02 doc
web实现显示正确当前时间
m0_63172128的博客
09-12 3664
2、getMonth()方法返回的值是从0（表示1月）开始，到11（表示12月）结束的一个整数，即0~11之间的一个整数；1、getYear()方法无法获取完整的年份，且在ECMAScript v3 开始，就被getFullYear() 方法取而代之，不怎么被使用了。getMinutes()：获取分钟数，返回的分钟数值是从0到59之间的整数。getHours()：获取小时数，返回的小时数值是从0到23之间的整数。getSeconds()：获取秒数，返回的秒数值是从0到59之间的整数。
JavaScript页面实时显示当前时间实例代码
11-27
总结一下，这个实例通过JavaScript的Date对象和DOM操作，实现在HTML页面上动态显示当前时间的功能。开发者可以根据需要调整样式或修改时间格式，以适应不同的应用场景。这种方法简单实用，是学习JavaScript日期和...
JS实现HTML页面中动态显示当前时间完整示例
10-18
主要介绍了JS实现HTML页面中动态显示当前时间,结合完整实例形式分析了JavaScript使用时间函数setTimeout及clearTimeout动态显示当前时间相关操作技巧,非常简单实用,需要的朋友可以参考下
js获取当前时间显示在页面上并每秒刷新
10-25
综上所述，这个示例展示了如何利用JavaScript的Date对象和DOM操作来动态地在页面上显示和更新当前时间，同时也展示了如何编写一个补位函数来确保时间格式的统一。这样的技术在实时应用、计时器或日志记录等场景中...
JavaScript通过setTimeout实时显示当前时间的方法
10-24
主要介绍了JavaScript通过setTimeout实时显示当前时间的方法,涉及javascript操作时间显示的技巧,非常具有实用价值,需要的朋友可以参考下
通过JS实现页面动态显示时间
m0_72687687的博客
08-11 1279
【代码】通过JS实现页面动态显示时间。
JavaScript 显示当前日期
iteye_10711的博客
03-15 150
New Document function showweek() // 显示中文星期 {now = new Date() //定义新对象，new具有Date的性质 if (now.getDay() == 0) return ("星期一") if (now.getDay() == 1) return ("星期二") if (now.get...
JavaScript实时显示当前时间
HerryDong的博客
12-13 1万+
JavaScript主要使用DateDate中的getMonth()方法返回值从0开始计数，获取日期需要使用getDate()方法，而不是getDay()方法。如果要实时获取时间，则需要使用Date结合定时器实现，下面介绍两种实现方法。使用和setTimeout都可以实时获取当前时间，如果你对递归深恶痛绝的话，那还是推荐使用，毕竟看起来更加简单直观。
js实现在网页上简单显示时间的方法
weixin_43741350的博客
03-15 725
js实现在网页上简单显示时间的方法
js实现页面显示时间
andyLiuzy的博客
08-05 702
js实现页面显示时间 function getTime(){ var dd=new Date();//获取当前时间对象 var year=dd.getFullYear();//年份 var month=dd.getMonth()+1;//月份+1得到当前月 var day=dd.getDate();//获取日 var w
用js显示日期时间
m0_52434369的博客
06-30 950
用js在页面上显示时间，日期，以s为单位更新，有详细的注解。对才接触js的小白超级友好，可以直接复制代码看效果哟！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
JavaScript实现动态时间显示功能
a320976399的博客
10-29 1万+
一、基本思路 创建showTime()函数，利用JavaScript中的Date对象的属性及方法获取时间，利用Window对象的 setInterval() 方法按照指定的周期（以毫秒计）来调用函数或计算表达式。最后利用document对象实现在页面上显示。 二、代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示时间</title> <
js动态显示实时时间
赵阳的博客
04-08 2万+
利用js动态显示实时时间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv
js在页面中动态显示当前时间
10-13
JS可以在网页上动态地显示当前时间。具体实现方法如下： 1. 在页面设置显示时间的位置，例如：<span id="showTime"></span> 2. 编写JS代码，获取当前时间并将其显示在指定位置。代码如下： <script> function getTime(){ var date = new Date; var time = date.getFullYear()+ "年" + (date.getMonth() + 1) + "月" + date.getDay() + "日" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒"; var showTimeSpan = document.getElementById("showTime"); showTimeSpan.innerHTML = time; } window.setInterval("getTime()", 1000); </script>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值