在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,安装一个实时服务器扩展,使任务更容易完成。