进制转换(了解)与保留小数(掌握)
- 十进制转换为其他进制
js
复制代码
十进制数字.toString(其他进制的数)
var num = 100
num.toString(2) // 将 10 进制的 100, 转换为 2 进制的数, 得到了: '1100100'
num.toString(36) // 将 10 进制的 100, 转换为 36 进制的数, 得到了: '2s'
- 其他进制转换为十进制
js
复制代码
var num = parseInt(数字, 将数字视为几进制的数字然后转换为10进制的数字)
var num = parseInt(100, 2) // 将100视为2进制的数, 然后将其转换为十进制的数字, 得到了: 4
var num = parseInt(100, 16) // 将100视为16进制的数, 然后将其转换为十进制的数字, 得到了: 256
- 保留小数 toFixed, 保留小数时四舍五入, 且返回的是字符串
js
复制代码
var num = 100.123456789
var num1 = num.toFixed(2) // 100.12
var num2 = num.toFixed(4) // 100.1235
Math 与 Date
- Math 给我们提供了操作数据的一些方法, 是 JS 内置的一个对象
- Date 给我们提供了操作时间的一些方法, 是 JS 内置的一个对象
数学方法
-
random / round / ceil / floor / abs
-
random
- 语法:
Math.random() - 作用: 得到一个随机数, 每次生成的数字都不一样, 但一定是0~1之间的,包含0 不包含1
- 语法:
-
round
- 语法:
Math.round(数字) - 作用: 将一个小数 四舍五入 变成整数
- 语法:
-
ceil
- 语法:
Math.ceil(数字) - 作用: 将一个小数 向上取整
- 语法:
-
floor
- 语法:
Math.floor(数字) - 作用: 将一个小数, 向下取整
- 语法:
-
abs
- 语法:
Math.abs(数字) - 作用: 返回一个数字的绝对值
- 语法:
-
-
sqrt / pow / max / min / PI
-
sqrt
- 语法:
Math.sqrt(数字) - 作用: 求平方根
- 语法:
-
pow
- 语法:
Math.pow(基数, 幂) - 作用: 返回基数的几次幂
- 语法:
-
max
- 语法:
Math.max(数字1, 数字2, 数字3, 数字4) - 作用: 返回最大值
- 语法:
-
min
- 语法:
Math.min(数字1, 数字2, 数字3, 数字4) - 作用: 返回最小值
- 语法:
-
PI
- 语法:
Math.PI() - 作用: 得到 π
- 语法:
-
-
封装函数: 范围内的随机整数
时间对象
时间对象的创建
-
语法:
var timer = new Date() -
不传参
- 默认返回当前时间
js 复制代码 var timer = new Date() console.log(timer) // Fri Oct 07 2022 08:52:29 GMT+0800 (中国标准时间) -
传参
- 可以获取到一个你传递进去的时间
js 复制代码 var timer = new Date('2022-01-06 12:12:12') console.log(timer) // Thu Jan 06 2022 12:12:12 GMT+0800 (中国标准时间)- 传递两个数字, 第一个为年, 第二个为月
js 复制代码 var timer = new Date(2022, 00) // 注意 月份从 0 开始计数, 0表示1月, 11表示12月 console.log(timer) // Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)- 传递三个数字, 前两个不变, 第三个表示该月份的第几天, 从1到31
js 复制代码 var timer = new Date(2022, 00, 31) // 注意 月份从 0 开始计数, 0表示1月, 11表示12月 console.log(timer) // Mon Jan 31 2022 00:00:00 GMT+0800 (中国标准时间)- 传递四个数字, 前三个不变, 第四个表示当天的几点, 0-23
js 复制代码 var timer = new Date(2022, 00, 31, 23) // 注意 月份从 0 开始计数, 0表示1月, 11表示12月 console.log(timer) // Mon Jan 31 2022 23:00:00 GMT+0800 (中国标准时间)- 传递五个数字, 前四个不变, 第五个为该小时的多少分钟, 0-59
js 复制代码 var timer = new Date(2022, 00, 31, 23, 59) // 注意 月份从 0 开始计数, 0表示1月, 11表示12月 console.log(timer) // Mon Jan 31 2022 23:59:00 GMT+0800 (中国标准时间)- 传递六个参数, 前五个不变, 第六个表示该分钟的多少秒, 0-59
js 复制代码 var timer = new Date(2022, 00, 31, 23, 59, 59) // 注意 月份从 0 开始计数, 0表示1月, 11表示12月 console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)- 传递字符串的形式
js 复制代码 console.log(new Date('2019')) // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02')) // Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-28')) // Thu Feb 28 2019 08:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-28 13:')) // Thu Feb 28 2019 13:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-28 13:13:')) // Thu Feb 28 2019 13:13:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-28 13:13:13')) // Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)
将日期对象格式化成指定内容
- 我们得到的时间字符串是:
Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间) - 我们得到这个日期中是那年或者那天, 需要靠截取字符串的形式得到
- 但是现在 JS 为我们提供了一系列的方法来得到里面的指定内容
getFullYear
得到指定字符串中的那一年
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getFullYear()) // 2022
getMonth
得到指定字符串中的那一月, 月的计数从 0 开始
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMonth()) // 0
getDate
得到指定字符串中的那一日
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDate()) // 31
getHours
得到指定字符串的那小时
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getHours()) // 23
getMinutes
得到指定字符串中的那分钟
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMinutes()) // 59
getSeconds
得到指定字符串中的那秒钟
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getSeconds()) // 59
getDay
获取当前日期是一周中的 第几天(周日是0, 周六是6)
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDay()) // 1
getTime
按照 格林威治时间计算 从1970 年 1 月 1 日 0 时 0 分 0 秒 到现在(或指定日期)的毫秒数
js
复制代码
var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getTime()) // 1554681622000
设置相关
setFullYear()
- 语法:
时间对象.setFullYear(年份信息) - 作用: 修改该时间对象内的 年份信息
js
复制代码
var time = new Date()
timer.setFullYear(2008)
console.log(timer.getFullYear())
setMonth()
- 语法:
时间对象.setMonth(月份信息) - 作用: 修改该时间对象内的 月份信息
js
复制代码
var time = new Date()
timer.setMonth(2)
console.log(timer.getMonth())
setDate()
- 语法:
时间对象.setDate(日期信息) - 作用: 修改该时间对象内的 日期信息
js
复制代码
var time = new Date()
timer.setDate(4)
console.log(timer.getDate())
setHours()
- 语法:
时间对象.setHours(小时信息) - 作用: 修改该时间对象内的 小时信息
js
复制代码
var time = new Date()
timer.setHours(12)
console.log(timer.getHours())
setMinutes()
- 语法:
时间对象.setMinutes(分钟信息) - 作用: 修改该时间对象内的 分钟信息
js
复制代码
var time = new Date()
timer.setMinutes(45)
console.log(timer.getMinutes())
setSeconds()
- 语法:
时间对象.setSecond(秒钟信息) - 作用: 修改该时间对象内的 秒钟信息
js
复制代码
var time = new Date()
timer.setSeconds(20)
console.log(timer.getSeconds())
setMilliseconds()
- 语法:
时间对象.setMilliseconds(毫秒信息) - 作用: 修改该时间对象内的 毫秒信息
js
复制代码
var time = new Date()
timer.setMilliseconds(857)
console.log(timer.getMilliseconds())
setTime()
- 语法:
时间对象.setTime(毫秒信息) - 作用: 使用时间戳信息直接定位时间对象
js
复制代码
var time = new Date()
timer.setTime(1440004004531)
console.log(timer)
- 案例
js
复制代码
/**
* 需求: 计算两个日期之间的时间差, 最好是封装到一个函数中
*
*
* 逻辑:
* 1. 创建两个时间对象
* 2. 计算两个时间对象的 毫秒数差值
* 3. 利用这个毫秒数差值 计算出内部有多少完整的天
* x / 一天的总毫秒数 ==> 5.7 4.3 2.8
* parseInt(x / 一天的总毫秒数) 5 4 2
* 4. 在计算剩下的毫秒数(不足一天), 里边有多少完整的 小时(分钟, 秒钟)
* 剩下的毫秒数 === 总毫秒数差值 - 有多少完整的天 * 一天的总毫秒数
*/
写法一：
var date1 = new Date()
var newdate = new Date('2000\03\14 00:00:00')
// console.log(date1); //不传参数默认返回当前时间
// console.log(newdate); //自定义年月日时分秒
var m = date1.getTime() - newdate.getTime()
var s = Math.ceil(m / 1000)
var day = parseInt (s / (60 * 60 * 24))
var hours = parseInt ( s % (60 * 60 * 24) / (60 * 60) )
var minutes = parseInt ( s % (60 * 60) / 60)
var seconds = parseInt(s % 60)
document.write(
`
今天距离时间过去了${day}天${hours}时${minutes}分${seconds}秒
`
)
写法二：
function fun (a, b) {
var date = new Date(a)
var date1 = new Date(b)
var time = date1.getTime() - date.getTime()
var date2 = parseInt(time / 86400000)
var shi = parseInt(time % 86400000 / 3600000)
var fen = parseInt(time % 86400000 % 3600000 / 60000)
var miao = parseInt(time % 86400000 % 3600000 % 60000 / 1000)
return date2 + '天' + shi + '时' + fen + '分' + miao + '秒'
}
console.log(fun('2023-8-24 :9:0:0','2023-9-28 : 16:0:0'));
写法三：
// 1. 创建两个时间对象
var aDate = new Date() // 获取当前的时间戳
var bDate = new Date(2023, 8, 28, 16, 0, 0) // 2023-9-28 16:00:00
// 2. 计算两个时间对象的 毫秒数差值
var x = bDate.getTime() - aDate.getTime()
// 3. 利用这个毫秒数差值 计算出内部有多少完整的天
// 3.1 计算 一天的总毫秒数
var oneDay = 24 * 60 * 60 * 1000
// 3.2 计算有多少完整的天 parseInt(x / 一天的总毫秒数)
var day = parseInt(x / oneDay)
// 3.3 计算 还剩多少不足一天的毫秒数 剩下的毫秒数 === 总毫秒数差值 - 有多少完整的天 * 一天的总毫秒数
x = x - day * oneDay
// 4. 利用剩下的毫秒数, 计算内部还有多少完整的 小时
// 4.1 计算 一小时的总毫秒数
var oneHours = oneDay / 24
// 4.2 计算有多少完整的小时
var hours = parseInt(x / oneHours)
// 4.3 计算还剩下的 不足一小时的 总毫秒数
x = x - hours * oneHours
// 5. 利用剩下的毫秒数, 计算内部还有多少完整的 分钟
// 5.1 计算 一分钟的总毫秒数
var oneMinutes = oneHours / 60
// 5.2 计算有多少完整的分钟
var minutes = parseInt(x / oneMinutes)
// 5.3 计算剩下不足一分钟的总毫秒数
x = x - minutes * oneMinutes
// 6. 计算还剩多少秒
// 6.1 计算 一秒的总毫秒数 1000
// 6.2 计算有多少完整的秒
var m = parseInt(x / 1000)
console.log(day, hours, minutes, m)
定时器
-
两种定时器的介绍和作用 ( setTimeout / setInterval )
-
setInterval 计时器, 每间隔固定的时间执行一次
-
语法: setInterval(函数, 数字)
- 函数: 每间隔多少时间执行的代码
- 数字: 间隔时间, 单位是毫秒
-
-
setTimeout 倒计时器, 在指定时间到达后, 执行一次
-
语法: setTimeout(函数, 数字)
- 函数: 一段时间后执行的代码
- 数字: 间隔时间, 单位是毫秒
-
-
注意
当不传递第二个参数的时候, 或者传递的是0的时候，执行速度会按照最快的速度执行，最快的速度一般为 4~20 毫秒, 最快速度与电脑性能有关，所以在书写定时器或者倒计时器的时候, 需要我们指定一个时间, 一般不要不写或者给 0 毫秒。
js
复制代码
// 定时器
// 意义：表明当前定时器是这个页面的第几个定时器
// 作用：能够利用返回值关闭这个定时器
// 注意：如果页面的打开方式是liversever启动，呢么定时器的ID一定会不一样
// setInterval (function () {
// console.log('定时器每次执行的时候，我就会执行一次');
// }, 1000)
// 利用返回值停止定时器
var box = setInterval(function(){
console.log('我是定时器执行的时候');
},1000)
setTimeout(function(){
console.log('我是倒计时，停止了上面的计时器');
clearInterval(box)
},5000)
js
复制代码
// 倒计时器
// setTimeout (function (){
// console.log('倒计时器时间到的时候，我就会执行一次');
// }, 1000)
// 利用返回值停止倒计时器
var box = setTimeout(function () {
console.log('我是定时器执行的时候');
}, 1000)
clearInterval(box)
-
定时器的返回值及意义
- 返回值不区分定时器种类, 用于表示你这个定时器是页面中的第几个定时器
- 作用: 用来关闭定时器
- 注意：如果页面的打开方式是利用 liveserver 启动, 那么定时器的ID, 会不太一样
-
关闭定时器
-
不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
-
语法:
- clearTimeout(定时器返回值)
- clearInterval(定时器返回值)
-
注意：关闭语法可以混用, 所以只要关闭定时器, 随便写上边那个都可以，但是推荐对应的书写, 目的是为了让别人一眼看出关闭的是定时器还是倒计时器
-
js
复制代码
// 查看定时器的返回值
var timerId = setInterval(function () {}, 1000)
console.log(timerId)
var timerId = setTimeout(function () {}, 1000)
console.log(timerId)
简单的代码异步执行机制
-
什么是非异步执行代码
- 按照从上到下的顺序, 从左到右的顺序, 依次执行每一行代码
- 上一行代码没有执行完毕, 不会执行下一行代码
-
什么是异步执行代码
- 当代码遇到异步任务的时候, 会把该代码放在 异步队列 内等待
- 所有的同步代码执行完毕后, 再开始执行 异步队列内的代码
-
什么是异步任务
- 两种定时器都是异步任务
- 可以理解为, 先执行定时器外面的代码, 然后执行定时器里边的代码
js
复制代码
/**
* JS 的异步任务
*
* JS 是单线程的, 同一时间只能做一件事
* 如果 只有单线程那么可能会遇到一些问题
*
* 上述的方案 如果遇到一个中间的代码 耗时很久, 那么后续的所有代码, 都需要等待上边的代码执行完毕后在执行
* 这种情况给用户的感觉就是非常卡顿
*
*
* 所以为了结局上述的问题, JS 将代码分为两个任务
*
* 同步任务
* 目前所接触到的内容中, 除了两个定时器之外的都是同步任务
*
* 异步任务
* 目前所接触到的内容中, 只有两个定时器算是异步任务, 将来还会有新的异步任务
*
*
* JS 中代码执行的顺序
* 代码从上往下执行
* 先将代码中所有的同步任务, 全都执行一遍
* 同步任务执行完毕后, 在执行异步任务
* 如果在代码的中间遇到了异步任务, 那么先将异步任务暂存到一个任务队列中, 等待所有的同步任务执行完毕后执行
*/
js
复制代码
console.log('1. JS开始执行')
setTimeout(function () {
console.log('2. 一个非常耗时的任务执行完毕')
})
console.log('3. JS执行完毕')
/**
* 同步任务
* 1. JS开始执行
* 3. JS执行完毕
*
* 异步任务
* 2. 一个非常耗时的任务执行完毕
*/
