发表于： 2023-03-22 20:28:37
0 124
今天的js知识：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>改变this</title>
</head>
<body>
<button>点击</button>
<script>
// call改变this
// call 主要是调用函数 同时指定被调用函数中的 this 的值
// 语法： thisArg:在fun函数运行时指定的 this 值 arg1，arg2：传递的其他参数
// fun.call(thisArg,arg1,arg2,...)
// const obj = {
// uname: 'pink'
// }
// function fn(x, y) {
// console.log(this) // window
// console.log(x + y)
// }
// // 1、调用函数
// // 2、改变this
// fn.call(obj, 1, 2)
// apply改变this
// apply方法 调用函数 同时指定被调用函数中的 this 的值
// 语法：thisArg:在fun函数运行时指定的 this 值 argArray：传递的值，必须包含在数组里面
// fun.apply(thisArg, [argArray])
// const obj = {
// uname: 'pink',
// age: 18
// }
// function fn(x, y) {
// console.log(this) // {uname: 'pink',age: 18}
// console.log(x + y)
// }
// fn()
// fn.apply(obj, [1, 2])
// // 求最大值
// const arr = [210, 45, 69]
// // 第一种求最大值
// const max = Math.max.apply(Math, [1, 2, 3])
// // 第二种求最大值
// const max1 = Math.max.apply(Math, arr)
// const min = Math.min.apply(Math, arr)
// console.log(max)
// console.log(max1, min)
// console.log('--------------------------')
// // 第三种求最大值
// console.log(Math.max(...arr))
// bind 改变 this
// bind()方法不会调用函数。但是能改变 函数内部 this 指向
// thisArg:在fun函数运行时指定的 this 值 argArray：传递的值，必须包含在数组里面
// 语法 fun.bind(thisArg, arg1, arg2, ...)
const obj = {
age: 18
}
function fn(x, y) {
console.log(this)
console.log(x + y)
}
// 1、bind不会调用函数
// 2、能改变this指向
// 3、返回是个函数，但是这个函数里面的this是更改过了 obj
const fun = fn.bind(obj, 1, 2)
// console.log(fun)
fun()
//需求 ： 有一个按钮 ，点击里面就禁用，2秒钟之后开启
document.querySelector('button').addEventListener('click', function () {
// 禁用按钮
this.disabled = true
setTimeout(function (){
this.disabled = false
}.bind(this), 2000)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
text-align: center;
color: #fff;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- <script src="js/lodash.min.js"></script>-->
<script>
// 防抖 ： 单位时间内，频繁触发事件，只执行最后一次
// // 需求： 鼠标在盒子上移动 里面的数字就会变化 +1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
// 如果里面存在大量消耗性能的代码，比如dom操作，可能造成卡顿
}
// // 添加事件
// // box.addEventListener('mousemove', mouseMove)
//
// // 利用lodash实现防抖 500毫秒之后才去+1
// // 语法 _.debounce(fun, 时间)
// box.addEventListener('mousemove', _.debounce(mouseMove, 500))
// 案例： 利用防抖来处理-鼠标滑动过盒子显示文字 (手写防抖函数)
// 需求 鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1
// 核心是利用 setTimeout 定时器来实现的
// 1、声明定时器变量
// 2、每次鼠标移动的时候先判断是否有定时器，如果有线清除以前的定时器
// 3、如果没有定时器，则开启定时器。存入到定时器变量里面
// 4、定时器里面写函数调用
function debounce(fn, t) {
let timer
// return 返回一个匿名函数
return function () {
if(timer) clearTimeout(timer)
timer = setTimeout(function (){
fn() // 加小括号调用 fn 函数
}, t)
}
}
box.addEventListener('mousemove', debounce(mouseMove, 500))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
margin: 100px auto;
background-color: red;
text-align: center;
color: #fff;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- <script src="js/lodash.min.js"></script>-->
<script>
// 节流 ： 单位时间内，频繁触发事件，只执行一次
//案例 利用节流来处理-鼠标滑动盒子显示文字
//需求 鼠标在盒子上移动，不管移动多少次，每隔 500ms才+1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
// 如果里面存在大量消耗性能的代码，比如dom操作，可能造成卡顿
}
// 添加事件
// box.addEventListener('mousemove', mouseMove)
// // 语法： _.throttle(fun, 时间)
// box.addEventListener('mousemove', _.throttle(mouseMove, 3000))
//手写节流函数 ，每隔 500ms才+1
function throttle(fn, t) {
let timer = null
return function () {
if (!timer) {
timer = setTimeout(function () {
fn()
//清空定时器
timer = null
}, t)
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 3000))
</script>
</body>
</html>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 1200px;
margin: 0 auto;
}
.video video {
width: 100%;
padding: 20px 0;
}
.elevator {
position: fixed;
top: 280px;
right: 20px;
z-index: 999;
background: #fff;
border: 1px solid #e4e4e4;
width: 60px;
}
.elevator a {
display: block;
padding: 10px;
text-decoration: none;
text-align: center;
color: #999;
}
.elevator a.active {
color: #1286ff;
}
.outline {
padding-bottom: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="http://pip.itcast.cn">
<img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
</a>
</div>
<div class="video">
<!-- <video> 元素提供了 播放、暂停和音量控件来控制视频。-->
<video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
</div>
<div class="elevator">
<a href="javascript:;" data-ref="video">视频介绍</a>
<a href="javascript:;" data-ref="intro">课程简介</a>
<a href="javascript:;" data-ref="outline">评论列表</a>
</div>
</div>
<script src="../../js进阶/js/lodash.min.js"></script>
<script>
// 1. 获取元素 要对视频进行操作
const video = document.querySelector('video')
//ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。
video.ontimeupdate = _.throttle(() => {
// console.log(video.currentTime) // 获得当前的视频时间
// 把当前的时间存储到本地存储
localStorage.setItem('currentTime', video.currentTime)
}, 1000)
// 打开页面触发事件，就从本地存储里面取出记录的时间， 赋值给 video.currentTime
// onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发。
video.onloadeddata = () => {
// console.log(111)
video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>
</body>
</html>
返回列表
评论