使用JavaScript在页面打印系统当前时间

最新推荐文章于 2024-04-23 21:45:12 发布
最新推荐文章于 2024-04-23 21:45:12 发布
阅读量9.2k 收藏 26
点赞数 2
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DangerousMc/article/details/102672678
版权

目录

一.获取当前时间

二.将时间打印在页面上

三.使网页中的时间动起来

一.获取当前时间

在JavaScript中，有一个内置对象Date（），其中包含了众多方法来获取系统的当前时间，该篇以如下的七个常用方法为例打印系统的当前时间

方法描述
getFullYear()返回四位数字表示的年份
getMonth()返回月份 (0 ~ 11)
getDate()返回一个月中的某一天 (1 ~ 31)
getDay()返回一周中的某一天 (0 ~ 6)
getHours()返回 Date 对象的小时 (0 ~ 23)
getMinutes()返回 Date 对象的分钟 (0 ~ 59)
getSeconds()返回 Date 对象的秒数 (0 ~ 59)

 

以下是创建Date()对象并获取当前时间并按规范格式打印在控制台的代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				var date=new Date();
				var year=date.getFullYear();
				var month=date.getMonth()+1;
				month=month<10?"0"+month:month;
				var day=date.getDate();
				day=day<10?"0"+day:day;
				var week="日一二三四五六".charAt(date.getDay());
				var hour=date.getHours();
				hour=hour<10?"0"+hour:hour;
				var minute=date.getMinutes();
				minute=minute<10?"0"+minute:minute;
				var second=date.getSeconds();
				second=second<10?"0"+second:second;
				
				var current=year+"-"+month+"-"+day+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
				console.log(current);
			}
		</script>
		
		<input type="button" value="按钮" onclick="test()"/>
	</body>
</html>

二.将时间打印在页面上

在第八行写一个div双标签，id名叫做time，然后将JavaScript代码中的console语句改为第二十七行的代码。

这行代码的意义是使用document代指整个HTML文件，然后在文件中寻找一个id名为“time”的标签，然后将current的值添加到该标签的innerHTML中，就可以在该div的区域显示要输出的系统时间了，代码示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="time"></div>
		
		<script>
			function test(){
				var date=new Date();
				var year=date.getFullYear();
				var month=date.getMonth()+1;
				month=month<10?"0"+month:month;
				var day=date.getDate();
				day=day<10?"0"+day:day;
				var week="日一二三四五六".charAt(date.getDay());
				var hour=date.getHours();
				hour=hour<10?"0"+hour:hour;
				var minute=date.getMinutes();
				minute=minute<10?"0"+minute:minute;
				var second=date.getSeconds();
				second=second<10?"0"+second:second;
				
				var current=year+"-"+month+"-"+day+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML=current;
			}
			test();
		</script>
	</body>
</html>

三.使网页中的时间动起来

因为我们示例中的时间是精确到秒的，所以要想让它动就是让它每秒变换一次，这里要先介绍一个方法：setInterval()

它参数列表中有两个参数，第一个参数是传入要执行的方法名，第二个参数是传入两次执行之间的间隔时间，以下是使用示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var i=1;
			function test(){
				console.log(i++);
			}
			setInterval("test()",1000);
		</script>
		
		<input type="button" onclick="test()" value="按钮" />
	</body>
</html>

但是该方法在第一次执行之前会先停顿一个1000毫秒，所以执行test方法时会有1000毫秒的延迟，解决办法就是在调用该方法之前先手动执行一次test方法，这时在页面中test方法的执行就没有延迟了，会是立刻执行的。而且要注意，由于HTML代码是按顺序加载的，所以要是手动执行一次test方法就必须将input标签放在script标签前面加载，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" onclick="test()" value="按钮" />
		
		<script>
			var i=1;
			function test(){
				console.log(i++);
			}
			test();
			setInterval("test()",1000);
		</script>
	</body>
</html>

接下来再将该方法用到显示时间的示例中，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="time"></div>
		
		<script>
			function test(){
				var date=new Date();
				var year=date.getFullYear();
				var month=date.getMonth()+1;
				month=month<10?"0"+month:month;
				var day=date.getDate();
				day=day<10?"0"+day:day;
				var week="日一二三四五六".charAt(date.getDay());
				var hour=date.getHours();
				hour=hour<10?"0"+hour:hour;
				var minute=date.getMinutes();
				minute=minute<10?"0"+minute:minute;
				var second=date.getSeconds();
				second=second<10?"0"+second:second;
				
				var current=year+"-"+month+"-"+day+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML=current;
			}
			test();
			setInterval("test()",1000);
		</script>
	</body>
</html>

AnFooo
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js格式输出当前日期
qq_60174482的博客
09-02 1438
//输出2021-09-0210:25:40 //第一种 vardate=newDate(); console.log(date); varyear=date.getFullYear(); varmonth=date.getMonth()+1; varday=date.getHours(); varhour=date.getHours(); varminute=date.getMinutes(); varseconds=date.getSeco...
利用Javascript实现当前系统时间显示
没有感情的代码机器的博客
09-27 5143
相信大家都在不少的网页上看到过时间显示的效果，那么如何用JS来实现呢 通常的办法是利用JS创建一个Date对象，通过对象来调用Date类的方法 代码如下： &amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&qu
js获取当前时间
热门推荐
mfxcyh的博客
08-31 7万+
如果有一个需求，需要将当前日期格式化为yyyy-MM-dd hh:mm:ss。
js输出当前年月日（案例）
最新发布
2302_78182291的博客
04-23 103
打印JS代码运行时间
然后他就拿棍子来打我
12-21 756
经常刷力扣的小伙伴都知道，在提交代码的时候会有代码运行时间的限制。如何打印执行时间呢，以下是使用方法。
JavaScript 中如何计算代码段运行时间
编程洪同学
05-25 2464
JavaScript 中如何计算代码段运行时间
js打印日期时间方法
r8711274r的博客
07-24 2308
js打印当前时间，首先js是拥有时间输出的。 用Date()可以打出时间。但是国际标准时间格式如下： document.write(Date()) Mon Jul 24 2017 21:29:35 GMT+0800 (中国标准时间) 这种时间格式往往不是我们想要的，我们可以根据标准时间来提取，组成我们想要的格式。 var dateDigitToString = function (num) { ...
如何在JavaScript中获取当前时间yyyymmddhhmmss? (六种实现方式)
欢迎光临~
05-13 4万+
在编写JavaScript代码时，我们经常需要获取当前日期和时间。在本文中，我们将介绍几种获取当前时间并将其格式化为的字符串的方法。
JavaScript实现简单的文本逐字打印效果示例
10-18
总之，JavaScript实现文本逐字打印效果的核心在于利用时间函数和页面元素操作。通过控制时间间隔和更新文本内容，我们可以创造出动态且引人入胜的用户界面。在实际项目中，可以根据需求调整时间间隔、动画效果和样式...
pdfmake：使用纯JavaScript的Clientserver端PDF打印
02-21
访问当前页码和页数， 背景层页面尺寸和方向， 边距自定义分页符字体嵌入， 支持复杂的多层（嵌套）结构， 目录， 打开/打印/下载生成的PDF的辅助方法， PDF元数据的设置（例如作者，主题）。文献资料文档URL： : ...
JavaScript打印网页指定区域的例子
12-02
JavaScript打印页面指定div区域原理：使用window.open()在浏览器打开一个新的页面（window）, 使用 window.[removed]()将指定div区域的内容写入新窗口文档，document.close()关闭文档，使用window.print()调用打印机...
javascript 实现页面打印
12-05
window.print() 函数是一个专门用来打印的函数，可以用来打印当前窗口的内容。下面是一个使用 window.print() 函数实现打印的示例代码： ```javascript javascript:window.print() ``` 四、实现套打功能 为了实现...
javascript使用输出语句实现网页特效代码
10-23
在JavaScript编程中，实现网页特效的关键之一是利用各种输出语句。这些语句允许开发者向用户展示信息或者在开发过程中调试代码。本文将详细介绍三种主要的JavaScript输出语句：`alert()`、`document.write()`与`...
JS 获取当前时间戳方法汇总
TTong_190502的博客
07-03 8469
js 获取当前时间戳的5种方法和开始结束时间的时间戳
JavaScript（js）打印时间（年月日及星期几）
weixin_45369499的博客
09-24 3859
对于这个问题，我是访问茅台的官网时候，看见其顶部有一个日期——年月日及星期几。 然后我就想模仿来做一个用JavaScript来获取系统时间并打印输出。很简单，实现代码： html部分： <div id="toDay"></div> js部分： function now(){ var date = new Date(); var year = date.getFull...
js打印代码执行时间差console.time()和console.timeEnd()；
九段刀客的博客
02-04 4205
console.time(); xxxx.then(() => { console.timeEnd(); });
js获取当前年月日 -- 看这一篇就够了
blog
11-21 3834
js获取当前年月日
js获取时间戳
龘
09-01 356
1、Date.parse()的使用 //返回当前时间的事件戳 Date.parse(new Date()); //返回值为1489881600000 2、Date.getTime()的使用 var dateNow = new Date(); var time = dateNow.getTime(); console.log(time); //打印出来的是1489899243209 3、巧妙写法 +new Date（） var time = + new Date(); console.log(time)
JS获取当前时间（年月日时分秒 2023-11-02 06:05:05）
donghua201的博客
11-10 1万+
方法可以使用ISO标准将 Date 对象转换为字符串，格式为：YYYY-MM-DDTHH:mm:ss.sssZ。至此，得到当前北京时间的时间戳，接下来把时间戳（例如1699609423364）转换成"YYYY-MM-DD HH:mm:ss"的格式。toISOString()：把Date对象转换为ISO格式的字符串，例如"2023-11-02T06:05:05.000Z"。replace(/T/, ' ')：把"T"替换为" "，即把ISO时间格式转换为可读性更高的格式。使用前要加上8小时的时间差。
javascript获取当前时间
09-22
### 回答1： 可以JavaScript的Date对象来获取当前时间。以下是获取当前时间的示例代码： ```javascript var currentDate = new Date(); console.log(currentDate); ``` 这将输出当前日期和时间的完整信息，例如：“Fri Dec 31 2021 17:18:34 GMT+0800 (中国标准时间)” ### 回答2： 在JavaScript中，可以使用内置的Date对象来获取当前的时间。 首先，我们需要创建一个Date对象： ```javascript var currentDate = new Date(); ``` 现在，我们可以使用Date对象的方法来获取当前时间的各个部分。例如，要获取当前的小时数，可以使用getHours()方法： ```javascript var currentHour = currentDate.getHours(); ``` 类似地，可以使用getMinutes()方法获取当前的分钟数，getSeconds()方法获取当前的秒数，getMilliseconds()方法获取当前的毫秒数。 如果我们只对当前的日期感兴趣，可以使用getDate()方法来获取当前的日期数，getMonth()方法获取当前的月份（注意：月份从0开始计数，即0表示一月，1表示二月，以此类推），getFullYear()方法获取当前的年份。 要将获取到的时间显示出来，可以将其存储到一个变量中，然后将其输出到控制台或网页上。例如： ```javascript var currentTime = currentHour + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); console.log(currentTime); ``` 以上代码将输出当前的小时数、分钟数和秒数。 总而言之，以上就是使用JavaScript获取当前时间的方法。我们可以根据自己的需求调用Date对象的不同方法来获取特定的时间部分，并将其输出到控制台或网页上进行显示。 ### 回答3： 在JavaScript中，可以使用`Date`对象来获取当前时间。 ```javascript var currentDate = new Date(); // 创建一个Date对象 var currentYear = currentDate.getFullYear(); // 获取当前年份 var currentMonth = currentDate.getMonth() + 1; // 获取当前月份（注意月份从0开始，所以要+1） var currentDay = currentDate.getDate(); // 获取当前日期 var currentHour = currentDate.getHours(); // 获取当前小时数 var currentMinute = currentDate.getMinutes(); // 获取当前分钟数 var currentSecond = currentDate.getSeconds(); // 获取当前秒数 console.log("当前时间：", currentYear, "年", currentMonth, "月", currentDay, "日", currentHour, "时", currentMinute, "分", currentSecond, "秒"); ``` 以上代码使用`Date`对象的各种方法来获取当前时间的年、月、日、小时、分钟和秒。在控制台使用`console.log()`方法打印输出当前时间。请注意，代码中的`getFullYear()`方法返回的是当前年份，而`getMonth()`方法返回的是从0开始的月份，需要自行加1。 如果你只想获取当前时间的字符串表示，可以使用`toLocaleString()`方法： ```javascript var currentTimeString = currentDate.toLocaleString(); // 获取当前时间的字符串表示 console.log("当前时间：", currentTimeString); ``` 以上代码中的`toLocaleString()`方法返回的是当前时间的字符串表示，包括日期和时间，格式可能因浏览器和操作系统而异。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值