做網(wǎng)站公司在深圳杭州疫情最新情況
今天是第九天，學(xué)習(xí)了JS中的設(shè)置日期和倒計(jì)時(shí)，計(jì)時(shí)器以及驗(yàn)證碼倒計(jì)時(shí)，那么話不多說我們開始今天的學(xué)習(xí)吧
一、日期設(shè)置
1.1日期創(chuàng)建
調(diào)用?new Date()?來創(chuàng)建一個(gè)新的?Date?對(duì)象。在調(diào)用時(shí)可以帶有一些參數(shù)，創(chuàng)建一個(gè)?Date?對(duì)象，其時(shí)間等于 1970 年 1 月 1 日 UTC+0 之后經(jīng)過的毫秒數(shù)（1/1000 秒）。
傳入的整數(shù)參數(shù)代表的是自 1970-01-01 00:00:00 以來經(jīng)過的毫秒數(shù)，該整數(shù)被稱為?時(shí)間戳。
這是一種日期的輕量級(jí)數(shù)字表示形式。我們通常使用?new Date(timestamp)?通過時(shí)間戳來創(chuàng)建日期，并可以使用?date.getTime()?將現(xiàn)有的?Date?對(duì)象轉(zhuǎn)化為時(shí)間戳（下文會(huì)講到）。
new Date(datestring)
如果只有一個(gè)參數(shù)，并且是字符串，那么它會(huì)被自動(dòng)解析。該算法與?Date.parse?所使用的算法相同，將在下文中進(jìn)行介紹。
new Date(year, month, date, hours, minutes, seconds, ms)
使用當(dāng)前時(shí)區(qū)中的給定組件創(chuàng)建日期。只有前兩個(gè)參數(shù)是必須的。
year?應(yīng)該是四位數(shù)。為了兼容性，也接受 2 位數(shù)，并將其視為?19xx，例如?98?與?1998?相同，但強(qiáng)烈建議始終使用 4 位數(shù)。month?計(jì)數(shù)從?0（一月）開始，到?11（十二月）結(jié)束。date?是當(dāng)月的具體某一天，如果缺失，則為默認(rèn)值?1。- 如果?
hours/minutes/seconds/ms?缺失，則均為默認(rèn)值?0。
1.2
訪問日期組件
從?Date?對(duì)象中訪問年、月等信息有多種方式：
getFullYear()
獲取年份（4 位數(shù)）
getMonth()
獲取月份，從 0 到 11。
getDate()
獲取當(dāng)月的具體日期，從 1 到 31，這個(gè)方法名稱可能看起來有些令人疑惑。
getHours()，getMinutes()，getSeconds()，getMilliseconds()
獲取相應(yīng)的時(shí)間組件。
不是?getYear()，而是?getFullYear()
很多 JavaScript 引擎都實(shí)現(xiàn)了一個(gè)非標(biāo)準(zhǔn)化的方法?getYear()。不推薦使用這個(gè)方法。它有時(shí)候可能會(huì)返回 2 位的年份信息。永遠(yuǎn)不要使用它。要獲取年份就使用?getFullYear()。
另外，我們還可以獲取一周中的第幾天：
getDay()
獲取一周中的第幾天，從?0（星期日）到?6（星期六）。第一天始終是星期日，在某些國家可能不是這樣的習(xí)慣，但是這不能被改變。
以上的所有方法返回的組件都是基于當(dāng)?shù)貢r(shí)區(qū)的。
當(dāng)然，也有與當(dāng)?shù)貢r(shí)區(qū)的 UTC 對(duì)應(yīng)項(xiàng)，它們會(huì)返回基于 UTC+0 時(shí)區(qū)的日、月、年等：getUTCFullYear()，getUTCMonth()，getUTCDay()。只需要在?"get"?之后插入?"UTC"?即可。
getTime()
返回日期的時(shí)間戳 —— 從 1970-1-1 00:00:00 UTC+0 開始到現(xiàn)在所經(jīng)過的毫秒數(shù)。
getTimezoneOffset()
返回 UTC 與本地時(shí)區(qū)之間的時(shí)差，以分鐘為單位。
下列方法可以設(shè)置日期/時(shí)間組件：
- 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 以來的毫秒數(shù)來設(shè)置整個(gè)日期）
以上方法除了?setTime()?都有 UTC 變體，例如：setUTCHours()。
我們可以看到，有些方法可以一次性設(shè)置多個(gè)組件，比如?setHours。未提及的組件不會(huì)被修改。
二、倒計(jì)時(shí)
可以使用 JavaScript 的計(jì)時(shí)器函數(shù)?setInterval()?來實(shí)現(xiàn)倒數(shù)計(jì)時(shí)器。
<!DOCTYPE html>
<html>
<head><title>倒數(shù)計(jì)時(shí)器</title>
</head>
<body><h1 id="countdown"></h1><script>// 倒數(shù)計(jì)時(shí)器總時(shí)間（以秒為單位）var totalSeconds = 60;// 獲取顯示倒數(shù)計(jì)時(shí)器的元素var countdownElement = document.getElementById("countdown");// 更新倒數(shù)計(jì)時(shí)器函數(shù)function updateCountdown() {// 計(jì)算剩余時(shí)間var minutes = Math.floor(totalSeconds / 60);var seconds = totalSeconds % 60;// 格式化時(shí)間字符串var timeString = minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');// 更新顯示倒數(shù)計(jì)時(shí)器的元素countdownElement.innerHTML = "倒數(shù)計(jì)時(shí)器: " + timeString;// 減少剩余時(shí)間totalSeconds--;// 如果剩余時(shí)間小于等于 0，則停止計(jì)時(shí)器if (totalSeconds <= 0) {clearInterval(countdownTimer);countdownElement.innerHTML = "倒數(shù)計(jì)時(shí)器: 時(shí)間到！";}}// 啟動(dòng)倒數(shù)計(jì)時(shí)器var countdownTimer = setInterval(updateCountdown, 1000);</script>
</body>
</html>在這個(gè)例子中，我們首先設(shè)置了倒數(shù)計(jì)時(shí)器總時(shí)間（60 秒），然后獲取了一個(gè) HTML 元素來顯示計(jì)時(shí)器，并創(chuàng)建了一個(gè)函數(shù) updateCountdown() 來更新計(jì)時(shí)器的顯示。
函數(shù) updateCountdown() 首先計(jì)算剩余時(shí)間（分鐘和秒數(shù)），然后格式化這些時(shí)間為一個(gè)字符串，并更新顯示計(jì)時(shí)器的元素。接著，它減少剩余時(shí)間，并檢查是否需要停止計(jì)時(shí)器（即剩余時(shí)間是否小于等于 0），如果需要停止，就清除計(jì)時(shí)器并更新顯示計(jì)時(shí)器的元素。
最后，我們使用 setInterval() 函數(shù)啟動(dòng)倒數(shù)計(jì)時(shí)器，每秒鐘調(diào)用一次 updateCountdown() 函數(shù)來更新計(jì)時(shí)器的顯示。
三、定時(shí)器
<script>// 定時(shí)器// 每隔一段時(shí)間 重復(fù)執(zhí)行一段代碼// 一次性定時(shí)器 延時(shí)定時(shí)器//設(shè)置一次性定時(shí)器 定時(shí)器//setTimeout(function(){執(zhí)行的代碼}，毫秒var n1 = setTimeout(function(){alert(666)},2000)var n2 = setTimeout(function(){alert(777)},3000)var n3 = setTimeout(function(){alert(888)},4000)//關(guān)閉一次性定時(shí)器 clearTimeout(n2)// 重復(fù)性定時(shí)器 周期定時(shí)器// var timer = setInterval(function(){執(zhí)
// clearInterval(timer)var i= 1;var timer = setInterval(function(){ i++;console.log(i) },1000)clearInterval(timer);</script>什么是定時(shí)器
JS提供了一些原生方法來實(shí)現(xiàn)延時(shí)去執(zhí)行某一段代碼
setTimeout：
設(shè)置一個(gè)定時(shí)器，在定時(shí)器到期后執(zhí)行一次函數(shù)或代碼段
setInterval:
以固定的時(shí)間間隔重復(fù)調(diào)用一個(gè)函數(shù)或者代碼段
四、驗(yàn)證碼倒計(jì)時(shí)
<button id="but" >5秒</button>
<script>var sec = 5;//5秒倒計(jì)時(shí)var timer = setInterval(function(){//秒數(shù)-1sec--;// 設(shè)置按鈕里的文本內(nèi)容but.innerHTML = sec+'秒'// 按鈕 禁用but.disabled = true;//當(dāng)秒數(shù)小于0，停止定時(shí)器if(sec <= 0){//停止定時(shí)器clearInterval(timer);//按鈕的文字修改成獲取驗(yàn)證碼but.innerHTML = '獲取驗(yàn)證碼'//按鈕取消禁用but.disabled = false;}},1000)</script>驗(yàn)證碼倒計(jì)時(shí)也是常用的，一定要牢記哦。
今天的學(xué)習(xí)到此結(jié)束。