今天是第九天,学习了JS中的设置日期和倒计时,计时器以及验证码倒计时,那么话不多说我们开始今天的学习吧
一、日期设置
1.1日期创建
调用 new Date()
来创建一个新的 Date
对象。在调用时可以带有一些参数,创建一个 Date
对象,其时间等于 1970 年 1 月 1 日 UTC+0 之后经过的毫秒数(1/1000 秒)。
传入的整数参数代表的是自 1970-01-01 00:00:00 以来经过的毫秒数,该整数被称为 时间戳。
这是一种日期的轻量级数字表示形式。我们通常使用 new Date(timestamp)
通过时间戳来创建日期,并可以使用 date.getTime()
将现有的 Date
对象转化为时间戳(下文会讲到)。
new Date(datestring)
如果只有一个参数,并且是字符串,那么它会被自动解析。该算法与 Date.parse
所使用的算法相同,将在下文中进行介绍。
new Date(year, month, date, hours, minutes, seconds, ms)
使用当前时区中的给定组件创建日期。只有前两个参数是必须的。
year
应该是四位数。为了兼容性,也接受 2 位数,并将其视为19xx
,例如98
与1998
相同,但强烈建议始终使用 4 位数。month
计数从0
(一月)开始,到11
(十二月)结束。date
是当月的具体某一天,如果缺失,则为默认值1
。- 如果
hours/minutes/seconds/ms
缺失,则均为默认值0
。
1.2
访问日期组件
从 Date
对象中访问年、月等信息有多种方式:
获取年份(4 位数)
获取月份,从 0 到 11。
获取当月的具体日期,从 1 到 31,这个方法名称可能看起来有些令人疑惑。
getHours(),getMinutes(),getSeconds(),getMilliseconds()
获取相应的时间组件。
不是 getYear()
,而是 getFullYear()
很多 JavaScript 引擎都实现了一个非标准化的方法 getYear()
。不推荐使用这个方法。它有时候可能会返回 2 位的年份信息。永远不要使用它。要获取年份就使用 getFullYear()
。
另外,我们还可以获取一周中的第几天:
获取一周中的第几天,从 0
(星期日)到 6
(星期六)。第一天始终是星期日,在某些国家可能不是这样的习惯,但是这不能被改变。
以上的所有方法返回的组件都是基于当地时区的。
当然,也有与当地时区的 UTC 对应项,它们会返回基于 UTC+0 时区的日、月、年等:getUTCFullYear(),getUTCMonth(),getUTCDay()。只需要在 "get"
之后插入 "UTC"
即可。
返回日期的时间戳 ------ 从 1970-1-1 00:00:00 UTC+0 开始到现在所经过的毫秒数。
返回 UTC 与本地时区之间的时差,以分钟为单位。
下列方法可以设置日期/时间组件:
- setFullYear(year, [month], [date])
- setMonth(month, [date])
- setDate(date)
- setHours(hour, [min], [sec], [ms])
- setMinutes(min, [sec], [ms])
- setSeconds(sec, [ms])
- setMilliseconds(ms)
- setTime(milliseconds)(使用自 1970-01-01 00:00:00 UTC+0 以来的毫秒数来设置整个日期)
以上方法除了 setTime()
都有 UTC 变体,例如:setUTCHours()
。
我们可以看到,有些方法可以一次性设置多个组件,比如 setHours
。未提及的组件不会被修改。
二、倒计时
可以使用 JavaScript 的计时器函数 setInterval()
来实现倒数计时器。
javascript
<!DOCTYPE html>
<html>
<head>
<title>倒数计时器</title>
</head>
<body>
<h1 id="countdown"></h1>
<script>
// 倒数计时器总时间(以秒为单位)
var totalSeconds = 60;
// 获取显示倒数计时器的元素
var countdownElement = document.getElementById("countdown");
// 更新倒数计时器函数
function updateCountdown() {
// 计算剩余时间
var minutes = Math.floor(totalSeconds / 60);
var seconds = totalSeconds % 60;
// 格式化时间字符串
var timeString = minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');
// 更新显示倒数计时器的元素
countdownElement.innerHTML = "倒数计时器: " + timeString;
// 减少剩余时间
totalSeconds--;
// 如果剩余时间小于等于 0,则停止计时器
if (totalSeconds <= 0) {
clearInterval(countdownTimer);
countdownElement.innerHTML = "倒数计时器: 时间到!";
}
}
// 启动倒数计时器
var countdownTimer = setInterval(updateCountdown, 1000);
</script>
</body>
</html>
在这个例子中,我们首先设置了倒数计时器总时间(60 秒),然后获取了一个 HTML 元素来显示计时器,并创建了一个函数 updateCountdown()
来更新计时器的显示。
函数 updateCountdown()
首先计算剩余时间(分钟和秒数),然后格式化这些时间为一个字符串,并更新显示计时器的元素。接着,它减少剩余时间,并检查是否需要停止计时器(即剩余时间是否小于等于 0),如果需要停止,就清除计时器并更新显示计时器的元素。
最后,我们使用 setInterval()
函数启动倒数计时器,每秒钟调用一次 updateCountdown()
函数来更新计时器的显示。
三、定时器
javascript
<script>
// 定时器
// 每隔一段时间 重复执行一段代码
// 一次性定时器 延时定时器
//设置一次性定时器 定时器
//setTimeout(function(){执行的代码},毫秒
var n1 = setTimeout(function(){
alert(666)
},2000)
var n2 = setTimeout(function(){
alert(777)
},3000)
var n3 = setTimeout(function(){
alert(888)
},4000)
//关闭一次性定时器
clearTimeout(n2)
// 重复性定时器 周期定时器
// var timer = setInterval(function(){执
// clearInterval(timer)
var i= 1;
var timer = setInterval(function(){
i++;
console.log(i)
},1000)
clearInterval(timer);
</script>
什么是定时器
JS提供了一些原生方法来实现延时去执行某一段代码
setTimeout:
设置一个定时器,在定时器到期后执行一次函数或代码段
setInterval:
以固定的时间间隔重复调用一个函数或者代码段
四、验证码倒计时
javascript
<button id="but" >5秒</button>
<script>
var sec = 5;
//5秒倒计时
var timer = setInterval(function(){
//秒数-1
sec--;
// 设置按钮里的文本内容
but.innerHTML = sec+'秒'
// 按钮 禁用
but.disabled = true;
//当秒数小于0,停止定时器
if(sec <= 0){
//停止定时器
clearInterval(timer);
//按钮的文字修改成获取验证码
but.innerHTML = '获取验证码'
//按钮取消禁用
but.disabled = false;
}
},1000)
</script>
验证码倒计时也是常用的,一定要牢记哦。
今天的学习到此结束。