JavaScript時(shí)間對(duì)象（上）

ate
●Date 是 js 的一個(gè)內(nèi)置對(duì)象，也叫內(nèi)置構(gòu)造函數(shù)。提供了一堆的方法幫助我們更方便的操作時(shí)間

創(chuàng)建時(shí)間對(duì)象：new Date()
獲取時(shí)間對(duì)象
●new Date() 在不傳遞參數(shù)的情況下是默認(rèn)返回當(dāng)前時(shí)間
○當(dāng)前終端的時(shí)間信息
○注意: 和你終端設(shè)置的時(shí)區(qū)有關(guān)系

var time=new Date()
console.log(time) // 當(dāng)前時(shí)間 Thu Sep 30 2021 11:05:10 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

●new Date() 在傳入?yún)?shù)的時(shí)候，可以獲取到一個(gè)你傳遞進(jìn)去的時(shí)間

var time=new Date('2019-03-03 13:11:11')
console.log(time) // Sun Mar 03 2019 13:11:11 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

創(chuàng)建一個(gè)指定時(shí)間的時(shí)間對(duì)象
●可以通過(guò)兩種方式來(lái)創(chuàng)建一個(gè)時(shí)間對(duì)象傳遞數(shù)字和傳遞字符串

傳遞數(shù)字
●new Date() 傳遞的參數(shù)有多種情況
○至少傳遞兩個(gè)數(shù)字, 一個(gè)不好使
○傳遞一個(gè)代表的是一個(gè)毫秒數(shù) 指的是格林威治時(shí)間到你傳遞的毫秒數(shù)
■格林威治時(shí)間 : 1970 年 1 月 1 日 0 時(shí) 0 分 0 秒
○每一個(gè)數(shù)字都會(huì)自動(dòng)進(jìn)位

1.傳遞兩個(gè)數(shù)字，第一個(gè)表示年，第二個(gè)表示月份
●第二個(gè)參數(shù)是表示月份的，但是這里需要注意這里的1月分是從0開(kāi)始，也就是說(shuō)0就表示1月分，11表示12月份

var time=new Date(2021, 09) // 月份從 0 開(kāi)始計(jì)數(shù)，0 表示 1月，11 表示 12月
console.log(time) // Fri Oct 01 2021 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
    //之傳入一個(gè)數(shù)字的情況
    //得到的是 從格林威治時(shí)間向后推進(jìn) 2021ms
    // 格林威治時(shí)間: 1970 年 1 月 1 日 0 點(diǎn) 0 分 0 秒
var time1=new Date(2021)
console.log(time1) // Thu Jan 01 1970 08:00:02 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

2.傳遞三個(gè)數(shù)字，前兩個(gè)不變，第三個(gè)表示該月份的第幾天，從 1 到 31

var time=new Date(2019, 00, 05) 
console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

3.傳遞四個(gè)數(shù)字，前三個(gè)不變，第四個(gè)表示當(dāng)天的幾點(diǎn)，從 0 到 23

var time=new Date(2019, 00, 05, 22) 
console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

4.傳遞五個(gè)數(shù)字，前四個(gè)不變，第五個(gè)表示的是該小時(shí)的多少分鐘，從 0 到 59

var time=new Date(2019, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

5.傳遞六個(gè)數(shù)字，前五個(gè)不變，第六個(gè)表示該分鐘的多少秒，從 0 到 59

var time=new Date(2019, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

傳遞字符串
●傳入字符串的形式
○注意：當(dāng)你傳遞字符串的時(shí)候, 1 表示 1 月, 12 表示 12 月
○年月日和時(shí)分秒之間一定要有一個(gè)空格

//傳遞參數(shù)形式一
console.log(new Date('2019'))
// Tue Jan 01 2019 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019-02'))
// Fri Feb 01 2019 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019-02-03'))
// Sun Feb 03 2019 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019-02-03 13:'))
// Sun Feb 03 2019 13:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019-02-03 13:13:'))
// Sun Feb 03 2019 13:13:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019-02-03 13:13:13'))
// Sun Feb 03 2019 13:13:13 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

//傳遞參數(shù)形式二
console.log(new Date('2019'))
// Tue Jan 01 2019 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019/02'))
// Fri Feb 01 2019 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019/02/03'))
// Sun Feb 03 2019 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019/02/03 13:'))
// Sun Feb 03 2019 13:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019/02/03 13:13:'))
// Sun Feb 03 2019 13:13:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(new Date('2019/02/03 13:13:13'))
// Sun Feb 03 2019 13:13:13 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

時(shí)間對(duì)象常用方法—獲取
獲取年 getFullYear
●作用：該方法是獲取年份的
●語(yǔ)法：時(shí)間對(duì)象.getFullYear()
●返回值：該時(shí)間對(duì)象內(nèi)的年份信息
○該方式是得到指定字符串中的年份信息

var time=new Date()
console.log(time.getFullYear()) // 2021

獲取月 getMonth
●作用：getMonth() 方法是得到指定字符串中的哪一個(gè)月份
●語(yǔ)法：時(shí)間對(duì)象.getMonth()
●返回值：該時(shí)間對(duì)象內(nèi)的月份信息
○注意：0 表示 1 月份, 11 表示 12 月份

var time1=new Date(2021, 11, 21, 10, 12, 15)
console.log(time1); //Tue Dec 21 2021 10:12:15 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(time1.getMonth()); // 11

獲取天 getDate

●作用：getDate() 方法是得到指定字符串中的哪一天
●語(yǔ)法：時(shí)間對(duì)象.getDate()
●返回值：該時(shí)間對(duì)象內(nèi)的日期信息

var time=new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getDate()) // 3

獲取小時(shí) getHours
●作用：getHours() 方法是得到指定字符串中的哪小時(shí)
●語(yǔ)法：時(shí)間對(duì)象.getHours()
●返回值：該時(shí)間對(duì)象內(nèi)的小時(shí)信息
○獲取到的是 24 小時(shí)制的小時(shí)時(shí)間

var time=new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getHours()) // 8

獲取分鐘 getMinutes
●作用：getMinutes() 方法是得到指定字符串中的哪分鐘
●語(yǔ)法：時(shí)間對(duì)象.getMinutes()
●返回值：該時(shí)間對(duì)象內(nèi)的分鐘信息

var time=new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMinutes()) // 0

獲取秒 getSeconds
●作用：getSeconds() 方法是得到指定字符串中的哪秒鐘
●語(yǔ)法：時(shí)間對(duì)象.getSeconds()
●返回值：該時(shí)間對(duì)象內(nèi)的秒鐘信息

var time=new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getSeconds()) // 22

獲取毫秒 getMilliSeconds
●作用：getMilliSeconds()方法的等到毫秒
●語(yǔ)法：時(shí)間對(duì)象.getMilliSeconds()
●返回值：該時(shí)間對(duì)象內(nèi)的毫秒信息
○毫秒是0--999。也就說(shuō)秒和毫秒之間是1000進(jìn)制

var time=new Date()
console.log(time.getMilliseconds())

獲取周幾 getDay
●作用：getDay() 方法是得到指定字符串當(dāng)前日期是一周中的第幾天（周日是 0，周六是 6）
●語(yǔ)法：時(shí)間對(duì)象.gerDay()
●返回值：該時(shí)間對(duì)象是一周中的第幾天, 也就是周幾

var time=new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getDay()) // 1

獲取時(shí)間戳 getTime
●作用：getTime() 方法是得到執(zhí)行時(shí)間到格林威治時(shí)間的毫秒數(shù)
●語(yǔ)法：時(shí)間對(duì)象.getTime()
●返回值：格林威治時(shí)間到現(xiàn)在的毫秒數(shù)

、制作網(wǎng)頁(yè)動(dòng)畫(huà)(了解)

本章目標(biāo)

會(huì)使用transform 2D變形設(shè)置網(wǎng)頁(yè)元素樣式
會(huì)使用transition制作過(guò)渡動(dòng)畫(huà)
會(huì)使用animation制作網(wǎng)頁(yè)動(dòng)畫(huà)

如何在網(wǎng)頁(yè)中實(shí)現(xiàn)動(dòng)畫(huà)效果？

動(dòng)態(tài)圖片
Flash
JavaScript

Flash需要插件支持，文件體積大從這次課開(kāi)始學(xué)習(xí)使用CSS代碼來(lái)完成動(dòng)畫(huà)：存在兼容性問(wèn)題

CSS3變形
CSS3過(guò)渡
CSS3動(dòng)畫(huà)

6.1、CSS變形

CSS3變形是一些效果的集合
如平移、旋轉(zhuǎn)、縮放、傾斜效果
簡(jiǎn)言之，平移就是一個(gè)變形，旋轉(zhuǎn)就是一個(gè)變形。。。

每個(gè)效果都可以稱(chēng)為變形（transform），它們可以分別操控元素發(fā)生平移、旋轉(zhuǎn)、縮放、傾斜等變化

在這里插入圖片描述

習(xí)強(qiáng)大的JavaScript一行代碼，能夠節(jié)省你的時(shí)間和代碼量。

1. 將內(nèi)容復(fù)制到剪貼板

為了提高網(wǎng)站的用戶(hù)體驗(yàn)，我們經(jīng)常需要將內(nèi)容復(fù)制到剪貼板，以便用戶(hù)可以將其粘貼到指定位置。

const copyToClipboard=(content)=> navigator.clipboard.writeText(content)
copyToClipboard("Hello fatfish")

2. 獲取鼠標(biāo)選中內(nèi)容

你以前遇到過(guò)這種情況嗎？我們需要獲取用戶(hù)選擇的內(nèi)容。

const getSelectedText=()=> window.getSelection().toString()
getSelectedText()

3. 打亂一個(gè)數(shù)組

打亂一個(gè)數(shù)組？這在彩票程序中非常常見(jiàn)，但它并不是真正的隨機(jī)。

const shuffleArray=array=> array.sort(()=> Math.random() - 0.5)
shuffleArray([ 1, 2,3,4, -1, 0 ]) // [3, 1, 0, 2, 4, -1]

4.將rgba轉(zhuǎn)換為十六進(jìn)制

我們可以將rgba和十六進(jìn)制顏色值互相轉(zhuǎn)換。

const rgbaToHex=(r, g, b)=> "#" + [r, g, b].map(num=> parseInt(num).toString(16).padStart(2, '0')).join('')
rgbaToHex(0, 0 ,0) // #000000
rgbaToHex(255, 0, 127) //#ff007f

5.將十六進(jìn)制轉(zhuǎn)換為rgba

const hexToRgba=hex=> {
  const [r, g, b]=hex.match(/\w\w/g).map(val=> parseInt(val, 16))
  return `rgba(${r}, ${g}, ${b}, 1)`;
}
hexToRgba('#000000') // rgba(0, 0, 0, 1)
hexToRgba('#ff007f') // rgba(255, 0, 127, 1)

6.獲取多個(gè)數(shù)字的平均值

使用reduce函數(shù)，我們可以非常方便地得到一組數(shù)組的平均值。

const average=(...args)=> args.reduce((a, b)=> a + b, 0) / args.length
average(0, 1, 2, -1, 9, 10) // 3.5

7.檢查一個(gè)數(shù)字是偶數(shù)還是奇數(shù)

怎么判斷一個(gè)數(shù)字是奇數(shù)還是偶數(shù)？

const isEven=num=> num % 2===0
isEven(2) // true
isEven(1) // false

8.在數(shù)組中去重元素

使用Set來(lái)刪除數(shù)組中的重復(fù)元素，會(huì)讓這個(gè)過(guò)程變得非常簡(jiǎn)單。

const uniqueArray=(arr)=> [...new Set(arr)]
uniqueArray([ 1, 1, 2, 3, 4, 5, -1, 0 ]) // [1, 2, 3, 4, 5, -1, 0]

9.檢查一個(gè)對(duì)象是否為空對(duì)象

const isEmpty=obj=> Reflect.ownKeys(obj).length===0 && obj.constructor===Object
isEmpty({}) // true
isEmpty({ name: 'fatfish' }) // false

10.反轉(zhuǎn)字符串

const reverseStr=str=> str.split('').reverse().join('')
reverseStr('fatfish') // hsiftaf

11.計(jì)算兩個(gè)日期之間的間隔

const dayDiff=(d1, d2)=> Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)
dayDiff(new Date("2023-06-23"), new Date("1997-05-31")) // 9519

12. 找出日期所在的年份中的天數(shù)

const dayInYear=(d)=> Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayInYear(new Date('2023/06/23'))// 174

13.將字符串的首字母大寫(xiě)

const capitalize=str=> str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello fatfish")  // Hello fatfish

14.生成指定長(zhǎng)度的隨機(jī)字符串

const generateRandomString=length=> [...Array(length)].map(()=> Math.random().toString(36)[2]).join('')
generateRandomString(12) // cysw0gfljoyx
generateRandomString(12) // uoqaugnm8r4s

15.在兩個(gè)整數(shù)之間獲取一個(gè)隨機(jī)整數(shù)

const random=(min, max)=> Math.floor(Math.random() * (max - min + 1) + min)
random(1, 100) // 27
random(1, 100) // 84
random(1, 100) // 55

16.指定位數(shù)四舍五入

const round=(n, d)=> Number(Math.round(n + "e" + d) + "e-" + d)
round(3.1415926, 3) //3.142
round(3.1415926, 1) //3.1

17.清除所有的cookies

const clearCookies=document.cookie.split(';').forEach(cookie=> document.cookie=cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

18.檢測(cè)是否為暗黑模式

const isDarkMode=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)

19.滾動(dòng)到頁(yè)面頂部

const goToTop=()=> window.scrollTo(0, 0)
goToTop()

20.判斷是否為蘋(píng)果設(shè)備

const isAppleDevice=()=> /Mac|iPod|iPhone|iPad/.test(navigator.platform)
isAppleDevice()

21.隨機(jī)布爾值

const randomBoolean=()=> Math.random() >=0.5
randomBoolean()

22.獲取變量的類(lèi)型

const typeOf=(obj)=> Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
typeOf('')     // string
typeOf(0)      // number
typeOf()       // undefined
typeOf(null)   // null
typeOf({})     // object
typeOf([])     // array
typeOf(0)      // number
typeOf(()=> {})  // function

23.判斷當(dāng)前選項(xiàng)卡是否處于活動(dòng)狀態(tài)

const checkTabInView=()=> !document.hidden

24.檢查元素是否處于焦點(diǎn)狀態(tài)

const isFocus=(ele)=> ele===document.activeElement

25. 隨機(jī)IP

const generateRandomIP=()=> {
  return Array.from({length: 4}, ()=> Math.floor(Math.random() * 256)).join('.');
}
generateRandomIP() // 220.187.184.113
generateRandomIP() // 254.24.179.151

總結(jié)

JavaScript一行代碼是節(jié)省時(shí)間和代碼的強(qiáng)大方式。它們可以用來(lái)在一行代碼中執(zhí)行復(fù)雜的任務(wù)，這對(duì)其他開(kāi)發(fā)人員來(lái)說(shuō)非常令人印象深刻。

在本文中，我們向您展示了25個(gè)厲害的JavaScript一行代碼，這些代碼將讓您看起來(lái)像個(gè)專(zhuān)家。我們還提供了一些關(guān)于如何編寫(xiě)自己的JavaScript一行代碼的技巧。

希望你喜歡這篇文章并且覺(jué)得它有幫助。如果你有任何問(wèn)題，請(qǐng)隨時(shí)在下方留言。

在線(xiàn)咨詢(xún)

上一篇：「Python從零到壹」二.語(yǔ)法基礎(chǔ)之條件語(yǔ)句、循
下一篇：2022屆畢業(yè)生，教育部“24365校園招聘服務(wù)”再

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商