在JavaScript中处理日期和时间的实用方法

112 阅读3分钟

在JavaScript中处理日期和时间的实用方法

JavaScript有一个内置的Date 对象,可以用于各种应用。在JavaScript中还有一些内置的方法,可以帮助我们利用Date 对象。

日期和时间是我们日常生活中的关键部分。在开发应用程序或软件时,知道如何使用它们是非常重要的。

前提条件

为了顺利地学习本教程,我们将需要。

  • JavaScript和HTML方面的基础知识
  • 一个你选择的文本编辑器
  • 一个浏览器

1.从一个日期中获取星期几

在JavaScript中,内置的方法new Date() ,默认用于获取当前日期。也有一个getDay() ,用于检查星期几。

它返回的结果是一个整数,范围在0 - 6 ,其中0是星期天,其余的日子分别在6之前,是星期六。

我们将使用上述两种方法,结合switch statement ,从今天的日期中获得日期。

 <!DOCTYPE  html>
<html  lang="en">
<head>
<title>Document</title>
</head>

<body>
<script>

var  d = new  Date();
var  today = "";

switch(d.getDay()){
	case  0:
		today = "Sunday"
		break;

	case  1:
		today = "Monday"
		break;

	case  2:
		today = "Tuesday"
		break;

	case  3:
		today = "Wednesday"
		break;

	case  4:
		today = "Thursday"
		break;

	case  5:
		today = "Friday"
		break;

	case  6:
		today = "Saturday"
		break;

	}

	document.writeln("Today is " + today)

</script>
</body>
</html>

2.计算两个日期之间的天数

在这个任务中,我们将首先初始化要使用的两个日期。接下来,我们减去两个日期之间的时间差,这将是以毫秒为单位的,最后,我们将毫秒转换成天数。

<!DOCTYPE  html>
<html  lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>

var  Today = new  Date("7/29/2021");
var  Target = new  Date("11/21/2050");

// Tym diff
var  Diff_in_tym = Target.getTime() - Today.getTime();
// No of days btwn
var  Diff_in_days = Diff_in_tym / (1000 * 3600 * 24);

document.writeln(Diff_in_days);

</script>
</body>
</html>

如果我们想使用像今天这样的当前日期,我们将需要在Today's 格式化方面做一些改变。

<!DOCTYPE  html>
<html  lang="en">
<head>
<title>Document</title>
</head>
<body>

<script>
var  Today = new  Date();
var  Target = new  Date("11/21/2050");

var  dd = String(Today.getDate()).padStart(2, '0'); // padString() is used to pad strings in js
var  mm = String(Today.getMonth()+1).padStart(2, '0') // until it reaches the provided length
var  yyy= Today.getFullYear();
Today = new  Date(mm + '/' + dd + '/' + yyy);

// Tym diff
var  Diff_in_tym = Target.getTime() - Today.getTime();
// No of days btwn
var  Diff_in_days = Diff_in_tym / (1000 * 3600 * 24);

document.writeln(Diff_in_days);

</script>
</body>
</html>

注意:如果目标日期刚好小于当前日期,结果将是负数。在写这篇文章的时候,Target 仍然是一个未来的日期。

3.计算两个日期之间的工作日数(不包括周末)

在这个任务中,我们将从一个日期迭代到另一个日期,计算周末的数量,直到我们到达指定的日期。接下来,我们将得到两个日期之间的天数,然后从两个日期之间的天数中减去周末数。

 <!DOCTYPE  html>
<html  lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>

var  weekends =0;
var  workdays = 0;

var  Today = new  Date();
var  Target = new  Date("11/21/2050");
  
var  dd = String(Today.getDate()).padStart(2, '0'); // padString() is used to pad strings in js
var  mm = String(Today.getMonth()+1).padStart(2, '0') // until it reaches the provided length
var  yyy= Today.getFullYear();
Today = new  Date(mm + '/' + dd + '/' + yyy);

// Tym diff
var  Diff_in_tym = Target.getTime() - Today.getTime();
// No of days btwn
var  Diff_in_days = Diff_in_tym / (1000 * 3600 * 24);

// Iterate through dates
for (var  d = new  Date(); d<= Target; d.setDate(d.getDate()+ 1)){
	if(d.getDay() == 0 || d.getDay() == 6) // 0 for sunday & 6 for saturday

	weekends = weekends + 1;
}
workdays = Diff_in_days - weekends;

document.writeln(workdays);

</script>
</body>
</html>

4.建立一个简单的倒计时器

在这个任务中,我们将使用setInterval() 方法,在每一个给定的时间间隔内重复我们的时间更新函数,在这种情况下,它应该是一秒钟。

这个方法将继续调用我们的函数,直到我们关闭窗口或调用clearInterval() 方法,在这种情况下,我们将在倒计时器到零时调用它。

我们还将使用floor() 方法,在得到时间差之后,返回四舍五入的天、小时、分钟和秒的数字。

<!DOCTYPE  html>
<html  lang="en">
<head>
<title>Document</title>
</head>
<body>

<p  id="countdown_Timer">
</p>
<script>
	// updating our timer per second
	
	var  time = setInterval(function(){
	// current time
	var  now = new  Date().getTime();
	// The final date's time
	var  target_Date = new  Date("11/21/2050").getTime();
	
	// get the time difference
	var  Diff_in_tym = target_Date - now;
	
	// breaking down the remaining time into days, hours, minutes & seconds
	var  days = Math.floor(Diff_in_tym / (1000 * 3600 * 24));
	var  hrs = Math.floor((Diff_in_tym % (1000 * 3600 * 24)) / (1000 * 3600));
	var  min = Math.floor((Diff_in_tym % (1000 * 3600 )) / (1000 * 60));
	var  sec = Math.floor((Diff_in_tym % (1000 * 60)) / 1000);

	// Displaying the timer
	document.getElementById("countdown_Timer").innerHTML = days + " Days " + hrs + " Hrs " + min + " min " + sec + " sec ";

	if(Diff_in_tym < 0 ){
		clearInterval(time);
		document.getElementById("countdown_Timer").innerHTML = "Time Out";
	}
	}, 1000);
</script>
</body>
</html>

总结

在本教程中,你已经学到了以下内容。

  • 如何从一个日期中检查今天是哪一天。
  • 如何计算两个日期之间的天数。
  • 计算两个日期之间的工作日数。
  • 迭代日期。
  • 如何建立一个简单的倒数计时器。

你现在就可以去尝试上面的任务,甚至可以对其进行定制。你可以复制这些片段并将其粘贴到你命名为.html 的文件中。

通过在浏览器中打开该文件来运行该代码。如果你使用的是VScode,安装一个实时服务器扩展,使任务更容易完成。