[油猴脚本开发指南]完善抖音脚本键盘事件
# 前文之前我们做过了抖音的视频提取脚本
我们这节课可以实践一些键盘的事件监听
为什么使用事件监听?
因为我没事找事!
# 开始
首先我们想完成两个目标
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()
})
}
```
那么到这里我们就完成了抖音视频下载加强版!
# 结语
撒花~
源码参考https://bbs.tampermonkey.net.cn/thread-1404-1-1.html ggnb! 道总yyds ggnb! 柒伍七 发表于 2022-2-17 21:44
ggnb!
ggnb! 柒伍七 发表于 2022-4-29 17:08
ggnb!
ggnb! 柒伍七 发表于 2022-4-30 12:48
ggnb!
ggnb! 柒伍七 发表于 2022-5-1 09:28
ggnb!
ggnb! ggyyds!{:4_94:}
页:
[1]
2