李恒道 发表于 2022-2-1 21:54:20

[油猴脚本开发指南]完善抖音脚本键盘事件

# 前文

之前我们做过了抖音的视频提取脚本

我们这节课可以实践一些键盘的事件监听

为什么使用事件监听?

因为我没事找事!

# 开始

首先我们想完成两个目标

1.按键自动滚动到底部,并且返回到顶部

2.按键自动全选所有视频,或取消所有视频

先来做滚动吧

首先我们假设监听Ctrl+方向下键以及Ctrl+A这两个快捷键作为功能触发按键

```javascript
unsafeWindow.addEventListener('keydown', (evt)=>{
    console.log('evt',evt);
});
```

我们先打印一下看看

这里我选择在按下键的时候进行监听

![图片.png](data/attachment/forum/202202/01/213310kesg66ts4c688e6e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

这里着重注意的就是keyCode,ctrlKey,shiftKey,altKey

keyCode是我们按键的按键码,而ctrl,shift,alt,那三个键值,代表你按键的时候是否按了对应的功能键

可以看到我按了Ctrl+↓的时候ctrlKey是true的

然后是选择全部视频的按键,我突然想起来ctrl+a会选择页面全部文本

所以临时更改为ctrl+z

![图片.png](data/attachment/forum/202202/01/213547ik7qeky46xz4x1i1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

可以看到键码为90,所以这里我们可以开始写一下了

```javascript
unsafeWindow.addEventListener('keydown', (evt)=>{
    if(evt.ctrlKey){
      if(evt.keyCode==40){
      //开始设置滚轴
            JumpToBottom()
      }
                if(evt.keyCode==90){
      //选择或取消全部视频
      }
    }
});
```

我们先写滚轴到下最后直接跳到顶部

我们直接先写一下滚轴代码吧

这里我用了setinterval循环,以及一个状态用来防止多次按键鼠标

```javascript
let jumprun=false;
function JumpToBottom(){
    if(jumprun==true){
      return;
    }
    jumprun=true;
    let timer=setInterval(()=>{
      debugger;
      let bottomdiv=document.querySelector('.knrjsN15 .VxGqO7jM')
      if(bottomdiv!==null){
            if(bottomdiv.innerText==='暂时没有更多了'){
                unsafeWindow.scrollTo(0,0)
                jumprun=false;
                clearInterval(timer)
                            return;
            }
      }
      unsafeWindow.scrollTo(0,document.body.scrollHeight)
    },300)

}
```

接下来我们来做选择全部的按键功能

```javascript
unsafeWindow.addEventListener('keydown', (evt)=>{
    if(evt.ctrlKey){
      if(evt.keyCode==40){
            //开始设置滚轴
            JumpToBottom()
      }
      if(evt.keyCode==90){
            //选择或取消全部视频
            SelectAllVideo()
      }
    }
});
```

我们直接获取视频数量,跟选中数量进行对比,然后判断选中全部还是取消全部

最后模拟用户的选择状态,以及触发onclick函数

代码如下

```javascript
function SelectAllVideo(){
    let alltarget=document.querySelectorAll('.control-pos input')
    let successnum=Object.keys(saveurl)
    let setstatus=false
    if(successnum.length===alltarget.length)
    {
      //取消全部
      setstatus=false
    }else{
      //选择全部
      setstatus=true;
    }
    alltarget.forEach((item)=>{
      item.checked=setstatus;
      item.parentElement.onclick()
    })

}
```

那么到这里我们就完成了抖音视频下载加强版!

# 结语

撒花~

李恒道 发表于 2022-2-1 23:39:50

源码参考https://bbs.tampermonkey.net.cn/thread-1404-1-1.html

王一之 发表于 2022-2-1 23:50:36

ggnb!

陈公子的话 发表于 2022-2-3 22:52:59

道总yyds

潘钜森 发表于 2022-2-17 21:44:33

ggnb!

潘钜森 发表于 2022-4-29 17:08:42

柒伍七 发表于 2022-2-17 21:44
ggnb!

ggnb!

潘钜森 发表于 2022-4-30 12:48:49

柒伍七 发表于 2022-4-29 17:08
ggnb!

ggnb!

潘钜森 发表于 2022-5-1 09:28:40

柒伍七 发表于 2022-4-30 12:48
ggnb!

ggnb!

潘钜森 发表于 2022-5-2 20:43:17

柒伍七 发表于 2022-5-1 09:28
ggnb!

ggnb!

李恒刀 发表于 2022-5-31 19:15:16

ggyyds!{:4_94:}
页: [1] 2
查看完整版本: [油猴脚本开发指南]完善抖音脚本键盘事件